在指令中使用控制器和控制器时的一个令人困惑的情况答案

【问题标题】：A confusing case when using controller and controllerAs in a directive在指令中使用控制器和控制器时的一个令人困惑的情况
【发布时间】：2015-06-06 18:29:09
【问题描述】：

如果指令直接使用控制器，为什么通过别名引用控制器来调用控制器上的方法，而不做任何事情？

假设我们有以下代码：

var app = angular.module('App', []);

    app.controller('MyController', ['$scope', function($scope) {
      $scope.doAction = function() {
        alert("controller action");
      }

      this.doAction2 = function() {
        alert("controller action 2");
      }
    }]);

    app.directive('myDirective', [function() {
      return {
        restrict: 'E',
        scope: {},
        controller: 'MyController',
        controllerAs: 'myCtrl',
        bindToController: true,
        template: "<a href='#' ng-click='myCtrl.doAction()'>Click it!<a><br><a href='#' ng-click='myCtrl.doAction2()'>Click it #2!<a> " ,
        link: function($scope, element, attrs, controller) {
          console.log($scope);
        }
      }
    }]);

虽然第一个链接不起作用，但第二个可以。为了使第一个工作，我必须删除别名，即不要通过 ng-click='myCtrl.doAction()' 调用操作来调用它：ng-click='doAction()'

难道不应该使用别名来工作吗？我的意思是，您更有可能找到并重用控制器，其中开发人员将操作附加到 $scope 对象而不是 this

【问题讨论】：

从你的最后一句话看来，你已经完全理解了this（控制器对象）和$scope（控制器中的注入可访问的变量，模板看起来在其中）之间的区别为了）。如果您的问题是“为什么要这样设计？”，这里就跑题了。如果不是，请澄清。

标签： angularjs angularjs-directive

【解决方案1】：

ControllerAs 在$scope[alias] 下的范围内公开控制器实例。

在您的示例中，范围（在概念上）如下所示：

$scope = {
  $id: 5,
  myCtrl: {
    doAction2: function(){...}
  },
  doAction: function(){...}
}

所以，你可以看到为什么ng-click="myCtrl.doAction()" 不起作用了。

与直接在作用域上公开属性相比，Controller-As 方法有一些好处——一个是它不会用它们可能不需要的属性污染作用域（及其后代）。它还固有地提供点方法 (.) 以与 ng-model 正常工作。您可以在此SO question/answer 中找到更多信息。

【讨论】：