2015-12-23 12 views
6

Uygulamam için yeni yollar oluşturmak için angular-fullstack generator kullanıyorum. Sözdizimi really unfamiliar ve sınıf benzeri bir yapı kullanır. $ Kapsam ve $ izle gibi şeyler enjekte etmek için bununla nasıl çalışırım? Yapmak istediğim en önemli şey belirli bir değişkenin değişimini izlemek. Sözdizimi aşağıda. Bununla nasıl çalışılacağını bilen var mı? Eğer açısal en controllerAs sözdizimi kullanmak için Onlar (benim varsayım) niyetinde

this.$watch('awasomeThings', function() { ... }); 

cevap

5

: Ben böyle bir şey yapmak, böylece

'use strict'; 

(function() { 

class MainController { 

    constructor($http) { 
    this.$http = $http; 
    this.awesomeThings = []; 

    $http.get('/api/things').then(response => { 
     this.awesomeThings = response.data; 
    }); 
    } 

    addThing() { 
    if (this.newThing) { 
     this.$http.post('/api/things', { name: this.newThing }); 
     this.newThing = ''; 
    } 
    } 

    deleteThing(thing) { 
    this.$http.delete('/api/things/' + thing._id); 
    } 
} 

angular.module('myapp') 
    .controller('MainController', MainController); 

})(); 

Nasıl $ saatini enjekte yoktur. Bunu yaptığınızda, $scope kullanarak çok daha az (sonunda).

Bunun nedeni, görüntülemelerinizin doğrudan kapsamla bağlamadığı, denetleyicinin özelliklerine bağlandıklarıdır. Yukarıdaki MyController örnekte Yani, görünümler arz denetleyicisi için bir ad kullanarak awesomeThings dizisi erişebilirsiniz: Eğer $scope.$watch() kullanmak istediğinizde yine $scope kullanmak gerekir

<body ng-controller="MyController as myCtl"> 
    <p ng-repeat="thing in myCtl.awesomeThings">{{thing}}</p> 
</body> 

biri durumdur. hangi çok görünüyor ben typescript kullanmak ... Bu söz dizimi ES6 büyük olasılıkla ama yanlış olabilir:

class MyController { 

    constructor($scope) { 
    // use the $scope.$watch here or keep a reference to it so you can 
    // call $scope.$watch from a method 
    this.$scope = $scope; 
    } 

} 

PS: Bu durumda, denetleyicinizdeki içine yukarıda $http ile yapılıyor aynı şekilde $scope enjekte benzer.

+0

Mükemmel, teşekkürler. Şimdi daha mantıklı. Onlar gerçekten düzenli javacript için derlemek için ES6 ve [Babel] (https://babeljs.io/) kullanıyorlar. – jOshT

+1

ES6 kullanıyorsanız, DI (güvenli kıymetlendirme için) işlevini, 'static $ inject = [' $ scope ']; 'sınıf tanımının hemen altında ve yapıcı işlevinden önce de ekleyebilirsiniz. ES6 transpenderiniz bu statik tanımı destekliyorsa. –

İlgili konular