Как мне работать с $scope и $watch с синтаксисом генератора angular-fullstack?

Я использую генератор angular-fullstack для создания новых маршрутов для своего приложения. Синтаксис действительно незнакомый и использует классовую структуру. Как мне работать с этим, чтобы вводить такие вещи, как $scope и $watch? Главное, что я хочу сделать, это следить за изменением конкретной переменной. Синтаксис ниже. Кто-нибудь знает, как с этим работать?

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

})();

Как мне ввести $watch, чтобы я мог сделать что-то вроде:

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

javascript angularjs mean-stack angular-fullstack meanjs
person jOshT    schedule 23.12.2015    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Они намереваются (мое предположение), чтобы вы использовали синтаксис Angular controllerAs. Когда вы делаете это, вы в конечном итоге используете $scope намного меньше (если вообще используете).

Причина в том, что ваши представления больше не привязываются напрямую к области видимости, они привязываются к свойствам контроллера. Таким образом, в приведенном выше примере MyController представления могут получить доступ к массиву awesomeThings, используя имя для контроллера, которое вы указали:

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

Один случай, когда вам все еще нужно использовать $scope, — это когда вы хотите использовать $scope.$watch(). В этом случае введите $scope в свой контроллер так же, как это делается с $http выше:

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: Этот синтаксис, скорее всего, ES6, но я могу ошибаться... Я использую Typescript, который очень похож.

person Sunil D.    schedule 23.12.2015
comment
Отлично, спасибо. Теперь это имеет гораздо больше смысла. Я думаю, что они действительно используют ES6 и Babel для компиляции в обычный javacript. - person jOshT; 23.12.2015
comment
Если вы используете ES6, то вы можете объявить свой DI (для безопасной минимизации) также, вставив static $inject = ['$scope']; сразу под определением класса и перед функцией конструктора. Если ваш транспилятор ES6 поддерживает это статическое определение. - person Sean Larkin; 23.12.2015