从指令调用父作用域函数

Calling parent scope function from directive

本文关键字：作用域 函数 调用 指令      更新时间：2023-09-26

我正在创建一个打开角度引导UI模式窗口的指令。当关闭模态时，我希望执行一个从指令上的属性传递的函数。。以下是我目前所拥有的：

这是在index.tpl.html:上

<popup class="something" .. on-close="update()"></popup>

指令代码，只有范围定义，因为在此之前有很多代码：

scope: {
         onClose: "&"
       },
link: function(scope, element, attr){
          //some code    
          ......
          scope.closeFn = function(){
               scope.onClose();
         }
         //opening of the modal:
         var modalInstance = $modal.open({
                   ....
                   templateUrl: 'path/to/template.tpl.html,
                   controller: 'PopupController',
                   scope: scope,
                   ....
         });

在弹出窗口的模板中，我有一个绑定到关闭按钮的函数，该按钮调用"弹出控制器"中的一个函数，该函数从指令链接函数中调用closeFn

<button type="button" class="btn-close btn btn-large" ng-click="closePopup()">Close
    </button>

在"弹出控制器"中：

$scope.closeUploadPopup = function () {
        $scope.$parent.closeFn();
        $modalInstance.close();
    };

据我所知，onClose（）应该执行onClose属性指定的函数吗？

我没有提供太多的代码，因为有很多原始代码，但如果有帮助的话，我可以添加更多。

您需要使用正确的API$modal服务提供。因此，modalInstance具有属性promise，当弹出窗口关闭（"确定"按钮）或关闭（"取消"按钮）时，您可以使用该属性"订阅"以获得通知。

scope: {
    onClose: "&"
},
link: function(scope, element, attr) {
    // ... some code       
    var modalInstance = $modal.open({
        // ....
        templateUrl: 'path/to/template.tpl.html',
        controller: 'PopupController',
        scope: scope,
        // ....
    });
    modalInstance.result.then(function() {
        scope.onClose(); // close handler
    }, function() {
        // dismiss handler
    });
};

在弹出模板中使用$close和$dismiss方法：

<button type="button" class="btn-close btn btn-large" ng-click="$close()">Close</button>

当您将新的controller分配给模式弹出窗口时，不需要分配scope属性，该属性无论如何都会被忽略。

为了使其发挥作用，我建议您从模式弹出的解析中传递该方法参考

var modalInstance = $modal.open({
    templateUrl: 'path/to/template.tpl.html',
    controller: 'PopupController',
    resolve: {
        onClose: scope.onClose
    },
    //....
});

控制器

app.controller('PopupController', function($scope, onClose){
    $scope.closeUploadPopup = function () {
        onClose();
        $modalInstance.close();
    };
})

也许这个对话框指令可以帮助你。

您可以自定义1.对话框标题2.消息正文3.显示在对话框上的按钮和相应的动作

<ng-dialog button="Yes|okFunction ,No|cancelFunction" dialogid="id-bootstrap" header="Angular Modal Dialog Directive " message="Hello World" theme="bootstrap">
</ng-dialog>

将创建带有两个按钮（1）是和2）否的对话框。okFunction和cancelFunction将在单击事件时调用。这些功能在控制器中定义。

请参阅下面的链接

http://yogeshtutorials.blogspot.in/2015/12/angular-modal-dialog-directive.html

相关文章：