Question

的index.html

scope.$broadcast('TEST_CHANGED', {test: 'test2'});
spyOn(scope, '$broadcast').and.callThrough();
expect(something2).toEqual('something2');

app.js：

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

node.html：

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();
    }
  }
});

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

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

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

提前致谢：）

Answer 1

您的代码有2个问题。在您的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>

为什么隔离范围“＆amp;”在angularJs的指令中没有使用controllerAs

1 个答案: