Question

我使用angular-fullstack generator为我的应用程序生成新路由。语法为really unfamiliar，并使用类似于类的结构。我如何使用它来注入$ 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 () { ... });

Answer 1

他们打算（我的假设）让你使用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。

如何使用angular-fullstack生成器语法使用$ scope和$ watch？

1 个答案: