Question

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

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

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>

Answer 2

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

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

请参阅以下链接。

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

从指令调用父范围函数

3 个答案: