从指令调用父范围函数

时间:2015-12-29 18:32:28

标签: javascript angularjs angularjs-directive scope

我正在创建一个指令,打开一个角度引导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属性指定的函数?

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

在为模态弹出窗口分配新的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();
    };
})

答案 2 :(得分:1)

可能是这个对话指令可以帮到你。

您可以自定义 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)否将创建。在click事件上调用okFunction和cancelFunction。这些功能在控制器中定义。

请参阅以下链接。

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