javascript - 在隔离作用域指令中，在作用域上定义变量和在 Controller 上定义变量之间有什么区别吗？

Question

几个月前我读过this article about not using ng-controller并采用了其背后的想法: Angular 应用程序应该是一组协同工作的组件。

基本思想是您可以将隔离范围指令与它们自己的 Controller 一起使用，如下所示:

.directive('myAppContestantList', function() {
    return {
      scope: {},
      templateUrl: 'my_app_contestant_list.html',
      replace: true,
      controller: 'ContestantListCtrl',
      controllerAs: 'ctrl'
    };
  })
  .controller('ContestantListCtrl', function() {
    this.contestants = [
      {firstName: 'Rachel', lastName: 'Washington'},
      {firstName: 'Joshua', lastName: 'Foster'},
      {firstName: 'Samuel', lastName: 'Walker'},
      {firstName: 'Phyllis', lastName: 'Reynolds'}
    ];
  });

而不是让你的数据属性为 $scope在您的 Controller 中，您将其设为 this 的属性( this 是 Controller 本身)。在 Controller 上定义变量意味着您只需在数据前面加上 ctrl 即可在 html 中引用数据。因为这就是您放入 controllerAs 中的内容字段:

<li ng-repeat="contestant in ctrl.contestants">
    {{contestant.firstName}} {{contestant.lastName}}
</li>

这对我来说效果很好，我开始嵌套指令而不是嵌套 Controller ，这解决了嵌套 $scope问题。

考虑到这一背景，我不明白的是为什么这篇文章提倡在 Controller 上定义变量而不是在$scope上定义变量。 。确实，以前$scope是一个巨大的问题，因为一旦你有了嵌套的作用域，它就会变得一团糟，但是使用它提倡的隔离作用域指令的模式，在 $scope 上定义的变量永不泄漏。

您也永远不会发现自己处于模板中存在多个 Controller 的位置，因此 controllerAs好像也没什么用。

我在非常成功地使用该模式并在 Controller 上定义了变量几个月后才这么说。我只是想知道是否/为什么这样做比在 $scope 上定义它们更好，而不是盲目地跟随文章。

这可能与bindToController有关吗？ ？

有人能指出我正确的方向吗？

Answer 1

确实，“controllerAs + this”配方主要针对引入多个 ng-controller 和其他内置指令的复杂模板，因此 Controller 标识符可以很好地处理范围继承。

另一侧具有隔离作用域的指令假设属性主要用于与父作用域交互，它不会引发作用域继承问题，并且 $scope 在那里感觉很好。

在第二种情况下，仅仅为了使代码看起来更像 Angular2 而去掉 $scope 是不切实际的，毕竟 AngularJS 在设计时就考虑到了范围。问题中提到的文章是过度热心范围迫害的一个很好的例子，在我看来，它在社区中引起了太多关注。

这是指令的简明示例:

app.directive('isolated', function () {
  return {
    scope: {
      'isolated': '@'
    },
    template: '{{::data}}',
    controller: function ($scope) {
      $scope.data = $scope.isolated + '!';
    },
    link: function (scope, element) {
      element.append("<br>DOM " + scope.data);
    }
  };
});

并且可以通过各种方式消除“范围”来“改进”指令:

app.directive('isolated', function () {
  return {
    scope: { // yikes!
      'isolated': '@'
    },
    template: '{{::vm.data}}',
    controller: function () {
      this.data = this.isolated + '!';
    },
    controllerAs: 'vm',
    bindToController: true,
    link: function (s___e, element, attrs, ctrl) {
      element.append("<br>DOM " + ctrl.data);
    }
  };
});

由于bindToController，它变得不那么冗长，并且只有模板被 Controller 标识符污染。这种转换看起来没什么用，但如果模板最终有可能出现一堆 ng-repeat，则可能会节省一些时间。

这两种语法可能还有其他不明显的用例。例如。 Controller this 语句 can be abstracted to separate service零努力(但零星的 $scope.$... 是令人扫兴的)。

TL;DR:如果代码依赖于“HTML 编程”和具有继承范围的指令，则 this 与 controllerAs 语法结合使用效果最佳，但很少是必须的当应用程序由具有隔离范围的类似 Web 组件的指令组成时，我认为。