在AngularJS中从指令模板调用控制器函数

Question

我找到了很多从指令调用控制器函数的例子，但是找不到从指令模板中调用它的例子。

假设我有这段HTML代码来打开模态指令

        <button ng-click='toggleModal()'>Open</button>
        <modal-dialog show='modalShown' confirm="confirmCtrl()">
            <p>Modal Content Goes here<p>
        </modal-dialog>

这是我的控制器，其中有一个名为confirmCtrl()的函数我想要调用：

myApp.controller('myController', function($scope){
 $scope.modalShown = false;
 $scope.toggleModal = function() {
  $scope.modalShown = !$scope.modalShown;
};
$scope.confirmCtrl = function () {
    alert('confirmed');
}

})

这是我的指令。I

.directive('modalDialog', function(){
     return {
        restrict: 'E',
        scope: {
            show: '=',
            corfirm: '&'
        },
        replace: true, 
        transclude: true, 
        link: function(scope, element, attrs) {
            scope.hideModal = function() {
            scope.show = false;
        };
     },
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div><button ng-click=""> Confirm </button></div></div>"

在我的模板中，我有一个按钮，我想在点击时调用 confirmCtrl() 函数，然而，我不知道该如何做。

这是一个可以工作的示例 http://jsfiddle.net/anao4nsw/

- Clementine

Answer 1

你可以在指令中定义控制器，如下所示，并在模板中的按钮元素“确认”中添加ng-click指令。

.directive('modalDialog', function(){
 return {
    controller: 'myController' //This line.
    restrict: 'E',
    scope: {
        show: '=',
        corfirm: '&'
    },
    replace: true, 
    transclude: true, 
    link: function(scope, element, attrs) {
        scope.hideModal = function() {
        scope.show = false;
    };
 },
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'>
           <div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div>
           <button ng-click='confirmCtrl()'> Confirm </button></div></div>"

请注意，在您的模板的最后一行添加了ng-click='confirmCtrl()'。

- Lee Brindley

---

哇，这将创建你的控制器的另一个实例，所以要注意！ - Thomas Decaux

Answer 2

您的指令看起来很好，这样做非常有效。测试一下，只需复制并替换当前的指令即可。

app.directive('modalDialog', function(){
     return {
        restrict: 'E',
        scope: {
            show: '=',
            confirm: '&'
        },
        replace: true, 
        transclude: true, 
        link: function(scope, element, attrs) {
            scope.hideModal = function() {
            scope.show = false;
        };
     },
template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div><button ng-click='confirm()'> OK </button></div></div>"
    };
   });

- glider

Answer 3

您已经完成了您所需的大部分工作。 & -binding可以实现这一点：它将一个函数分配给隔离作用域的属性，当调用此函数时，它会执行指定在属性中的表达式。因此，在您的模板中，您只需要在ng-click中调用隔离作用域的此函数：<button ng-click="confirm()"> Confirm </button>。由于拼写错误，它可能无法正常工作：您将coRfirm：'＆amp;' 而不是coNfirm：'＆amp;' 。

- thorn0