为什么孤立的范围“＆”不能与angularJs指令中的controllerAs一起使用

Question

index.html

<div ng-app="phoneApp">
  <div ng-controller="ctrl as AppCtrl">
    <div phone dial="ctrl.callHome('called home!')"></div>
  </div>
</div>

app.js：

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

app.controller("AppCtrl", function ($scope) {
  var ctrl = this;
  ctrl.callHome = function (message) {
    alert(message);
  };
});

app.directive("phone", function () {
  return {
    scope: {},
    bindToController : {
      dial: "&"
    },
    controller       : controller,
    controllerAs     : 'controllerVM',

    templateUrl : 'node.html'
  };

  function controller(){
    controllerVM.onClick = function(){
      controllerVM.dial();
    }
  }
});

node.html：

<button ng-click="controllerVM.onClick()">Button</button>

当我单击phone指令的Button时，它应调用AppCtrl的callHome函数，但不会被调用。

当我从各处删除controllerAs并直接从模板调用指令拨号功能时，它工作正常

所以请帮助我，我想念什么？

提前致谢 ：）

Answer 1

您的代码有2个问题。 在HTML中，您使用的是ctrl as AppCtrl ，这是错误的。 您应该使用“ AppCtrl as ctrl ”。 第二个问题是在电话控制器内，您尚未定义controllerVM。 您应该像' var controllerVM = this;这样定义它var controllerVM = this; '我在下面插入了一个工作片段。

 var app = angular.module('phoneApp', []); app.controller("AppCtrl", function ($scope) { var ctrl = this; ctrl.callHome = function (message) { alert(message); }; }); app.directive("phone", function () { return { scope: {}, bindToController : { dial: "&?" }, controller : controller, controllerAs : 'controllerVM', template : '<button ng-click="controllerVM.onClick()">Button</button>' }; function controller(){ var controllerVM = this; controllerVM.onClick = function(){ controllerVM.dial(); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <div ng-app="phoneApp"> <div ng-controller="AppCtrl as ctrl"> <div phone dial="ctrl.callHome('called home!')"></div> </div> </div>