孤立スコープ "＆" angularJs

Question

のindex.htmlのディレクティブでcontrollerAsで作業されていないのはなぜ

<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> 

私は電話ディレクティブのButtonをクリックすると、AppCtrlのcallHome関数を呼び出す必要がありますが、呼び出されていません。私はどこのすべてからcontrollerAsを削除し、直接テンプレートから指示ダイヤル関数を呼び出すと

、それが正常に動作している

だから私は行方不明です何私を助けてください？

ありがとうございます。

Answer 1

コードには2つの問題があります。あなたのHTMLでは、 'ctrl as AppCtrl'が間違っています。 「AppCtrl as ctrl」を使用してください。 2番目の問題は電話機コントローラ内であり、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>