爲什麼孤立的範圍 「和」 不與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>