如何觸發一個按鈕點擊，根據哪個Controller在視圖上執行不同的事情？

Question

問題

你如何觸發一個按鈕，點擊，做基於哪個控制器上的觀點不同的東西？

形勢

下面我有兩個指令/共享相同的模板視圖控制器。所有數據都正確渲染--但是不會對點擊執行任何操作。如果我將語法更改爲ng-click="{{::vm.action()}}" ...代碼會中斷查看。

CODE

main.html中

<confirm-modal></confirm-modal> 

<error-modal></error-modal> 

modal.html：

<article> 
    <h1>{{::title}}</h1> 
    <p>{{::body}}</p> 
    <button ng-click="{{::action}}">{{::button}}</button> 
</article> 

確認-modal.directive.js（和控制器）

angular 
    .module('common.modal') 
    .controller('ConfirmModalController', ConfirmModalController) 
    .directive('confirmModal', confirmModal); 

/* @ngInject */ 
function confirmModal() { 

    var directive = { 
    templateUrl: 'app/widgets/modals/modal.html', 
    restrict: 'E', 
    controller: ConfirmModalController, 
    controllerAs: 'vm', 
    bindToController: true 
    }; 

    return directive; 
} 

function ConfirmModalController(modalService) { 

    var vm = this; 

    vm.title = 'Confirm Your Subscription'; 

    vm.body = '$8.99 per month will be billed to your account.'; 

    vm.button = 'Subscribe'; 

    vm.action = function() { 
    console.log('confirm subscription'); 
    modalService.confirmSubscription(); 
    }; 

} 

誤差modal.directive.js（和控制器）

angular 
    .module('common.modal') 
    .controller('ErrorModalController', ErrorModalController) 
    .directive('errorModal', errorModal); 

/* @ngInject */ 
function errorModal() { 
    var directive = { 
    templateUrl: 'app/widgets/modals/modal.html', 
    restrict: 'E', 
    controller: ErrorModalController, 
    controllerAs: 'vm', 
    bindToController: true 
    }; 

    return directive; 
} 

function ErrorModalController(modalService) { 

    var vm = this; 

    vm.title = 'There was an error with your request'; 

    vm.body = 'Please contact administrator regarding this error'; 

    vm.button = 'Dismiss'; 

    vm.action = function() { 
    console.log('error on subscription'); 
    modalService.closeAllModals(); 
    }; 
} 

Answer 1

{{::vm.action}}是功能vm.action基準而當模板被渲染{{::vm.action()}}執行該功能。 Angular將該函數的返回值（本例中未定義）綁定到ng-click。只需在點擊處理程序中刪除角度表達式分隔符：

<article> 
    <h1>{{::vm.title}}</h1> 
    <p>{{::vm.body}}</p> 
    <button ng-click="vm.action()">{{::vm.button}}</button> 
</article> 

編輯：對不起。忘記了（）