从指令中调用父级作用域函数

Question

我将创建一个指令，打开一个Angular Bootstrap 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属性指定的函数？我没有提供很多代码，因为原始代码很多，但如果有帮助的话，我可以添加更多。

- Loshmeey

Answer 1

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

- dfsq

---

你好，感谢友好的回复！我尝试在结果承诺上调用该函数，但似乎父函数仍未被调用。我尝试进行了一些调试，这就是我偶然发现的 destination[scopeName] = function(locals) { return parentGet(scope, locals); };来自Angular源代码其中locals是未定义的。可能是我绑定函数调用的方式不正确吗？ - Loshmeey

应该可以工作：http://plnkr.co/edit/QYC7gfbk45x6rLkZASdi?p=info 尝试使用您的代码更新此演示，并查看是否可以提供具有问题的演示。 - dfsq

Answer 2

由于您正在为模态弹出窗口分配新的“控制器”，因此无需分配“作用域”属性，该属性将被忽略。

为使其正常工作，建议您从模态弹出窗口的解析传递该方法引用。

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();
    };
})

- Pankaj Parkar

---

你好，感谢您的回复！不幸的是，我使用这个解决方案时遇到了与@dfsq所提供的答案相同的问题。在他的回复中，我已经提到了可能存在的问题，请问您认为这个问题可能有关吗？ - Loshmeey

Answer 3

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

您可以自定义： 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

- Yogesh