为什么孤立的范围 “和” 不与controllerAs在angularJs

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> 

当我点击电话指令的按钮时，它应该调用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>