在指令

Question

如果指令直接使用控制器，为什么在控制器上通过别名引用控制器而不执行任何操作来调用方法？

想象一下，我们有以下代码：

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

Answer 1

ControllerAs在$scope[alias]下的作用域上公开控制器实例。

在您的示例中，范围（概念上）看起来像这样：

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

因此，您可以看到为什么ng-click="myCtrl.doAction()"不起作用。

Controller-As方法比直接暴露范围上的属性有一些好处 - 一个是它不会使用它们可能不需要的属性污染范围（及其后代）。它本身也提供了点方法（.）以便与ng-model一起正常工作。您可以在此SO question/answer中找到更多信息。