javascript-从指令调用父范围函数

我正在创建一个指令,该指令打开一个角度引导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,
                   ....
         });

在弹出窗口的模板中,我有一个绑定到关闭按钮的函数,该按钮调用“ PopupController”中的函数,后者从指令链接函数中调用closeFn,就像这样.

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

并在’PopupController’中：

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

据我了解scope.onClose()应该执行on-close属性指定的功能吗？

由于原始代码很多,因此我没有提供很多代码,但是如果有帮助,我可以添加更多代码.

解决方法:

您需要使用正确的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>

标签：scope,angularjs,angularjs-directive,javascript
来源： https://codeday.me/bug/20191119/2034619.html