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

Question

我正在使用 angular-fullstack generator to generate new routes for my application. The syntax is really unfamiliar 并使用类似 class 的结构。我如何使用它来注入 $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？

How do I work with $scope and $watch with angular-fullstack generator syntax?

javascript

angularjs

mean-stack

meanjs

angular-fullstack