Jak pracować z $ scope i $ watch przy użyciu składni generatora z pełnymi kątami?

Używam angular-fullstack generator do generowania nowych tras dla mojej aplikacji. Składnia to really unfamiliar i używa struktury podobnej do klasy. Jak mam z tym pracować, aby wstrzykiwać takie rzeczy jak $ scope i $ watch? Najważniejszą rzeczą, jaką chcę zrobić, jest obserwowanie zmiany dla konkretnej zmiennej. Składnia jest poniżej. Ktoś wie jak z tym pracować?

'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); 

})();

Jak wstrzykiwać $ zegarek tak, że mogę zrobić coś takiego:

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

Źródło

2015-12-23 jOshT

Oni zamierzają (moje przypuszczenie) do użycia controllerAs składni kątowej za. Kiedy to zrobisz, w końcu używasz $scope o wiele mniej (jeśli w ogóle).

Powodem jest to, że Twoje widoki nie wiążą się bezpośrednio z zasięgiem, wiążą się z właściwościami kontrolera. Więc w przykładzie MyController powyżej poglądy mogą uzyskać dostęp do tablicy awesomeThings użyciu nazwy kontrolera, że dostawy:

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

jeden przypadek, gdzie nadal trzeba używać $scope jest, gdy chcesz użyć $scope.$watch(). W tym przypadku, wstrzyknąć $scope do kontrolera, w ten sam sposób to się robi z $http powyżej:

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: Ta składnia jest najprawdopodobniej ES6 ale mogę się mylić ... Używam maszynopis, który wygląda bardzo podobny.

Źródło

2015-12-23 18:02:18

Doskonale, dziękuję. Teraz ma to więcej sensu. Myślę, że rzeczywiście używają ES6 i [Babel] (https://babeljs.io/) do kompilowania go do zwykłego javacript. – jOshT

Jeśli używasz ES6, możesz zadeklarować swoją DI (dla bezpiecznej minifikacji) również przez wstawienie 'static $ inject = ['$ scope'];' tuż pod definicją klasy i przed funkcją konstruktora. Jeśli twój transpilator ES6 obsługuje tę definicję statyczną. –

Jak pracować z $ scope i $ watch przy użyciu składni generatora z pełnymi kątami?

Odpowiedz

Powiązane problemy