为什么隔离范围"&"未按照angularJs的指示与controllerAs一起工作

Why isolated scope "&" is not working with controllerAs in directive of angularJs

本文关键字：quot 指示 controllerAs angularJs 工作 一起 范围 隔离 amp 为什么      更新时间：2023-09-26

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>

当我点击电话指令的按钮时，它应该调用AppCtrl的函数callHome，但它没有被调用。

当我从每个位置删除controllerAs并直接从模板调用指令拨号函数时，它正常工作

所以请帮帮我，我还缺少什么？

提前感谢：(

您的代码有两个问题。在HTML中，您使用的是"ctrl as AppCtrl"，这是错误的。您应该使用"AppCtrl as ctrl"。第二个问题是在电话控制器中，您没有定义controllerVM。您应该像"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>

相关文章：