Question

我正在关注meteor和angular的教程，并使用下面定义的控制器。然而，这似乎与典型的声明不同，并且混淆了这一点是如何不同的。具体来说，我想更改$scope.phone中的addNumber，但我无法弄清楚如何做到这一点。它通过ng-model传递给函数。我想知道constructor($scope)正在做什么。谢谢。

class TodosListCtrl {
  constructor($scope) {
    $scope.viewModel(this);
    $scope.phone = '';
    $scope.first = '';
    $scope.last = '';
  }
  addNumber(first,last,phone){
    Numbers.insert({
      first_name: first,
      last_name: last,
      number: phone,
      createdAt: new Date
  });
  // tried
  // phone = ''; 
  //this.phone = '';
  //$scope.phone didnt work
}

Answer 1

在构造函数中，添加以下行：

  constructor($scope) {
    'ngInject';  // add this to ensure injection occurs.
    $scope.viewModel(this);
    $scope.phone = '';
    $scope.first = '';
    $scope.last = '';

    this.$scope = $scope;
  }

然后在addNumber：

  addNumber(first,last,phone) {
    Numbers.insert({
      first_name: first,
      last_name: last,
      number: phone,
      createdAt: new Date
    });
    this.$scope.phone = phone;
  }

由于addNumber函数的运行时间晚于构造函数，因此需要以某种方式存储对$scope的引用。最简单的方法是将其添加到this。

Answer 2

我想知道构造函数（$ scope）正在做什么。感谢。

这是在构造函数中注入依赖项。就这样。除非您将控制器中给出的实例分配给控制器的$scope实例，否则它不允许您访问控制器中其他任何位置的注入this实例。你可以这样做（正如Andrew Eisenberg建议的那样），但是，如果你将这个控制器与指令一起使用（你可能应该这样，独立的控制器在现代角度练习中非常罕见），那么它就更容易设置指令定义上的bindToController: true，它会自动将控制器this实例上的所有属性附加到本地范围。

如果您使用组件（我建议任何导致DOM创建的组件），则会自动应用此设置。请参阅：https://docs.angularjs.org/guide/component以供参考。

混淆范围和构造函数如何在角度中工作

2 个答案: