從指令調用父范圍函數

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 ，您可以使用它來“訂閱”以在彈出窗口關閉（“Ok”按鈕）或解除（“Cancel”按鈕）時收到通知。

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