簡體   English   中英

Angular-UI-Bootstrap模式不會覆蓋現有模式

[英]Angular-UI-Bootstrap Modal not overwriting existing modals

我已經在AngularJS應用的$rootScope上創建了alertModal函數。 它工作得很好,但是,我需要每個模式都可以覆蓋后續的模式。 換句話說,如果已經有一個模式打開,我希望任何后續的模式都可以關閉現有的。 由於每個$modal實例都會在$rootScope上創建一個子范圍,因此我不知道該怎么做。 $modal有一個選項可以將要使用的scope傳遞給它(而不是$rootScope ),但是我不確定如何純粹為此目的實例化自定義范圍。 任何幫助或線索將是巨大的。

$rootScope.modalAlert = function (alert_type, message, acknowledge) {
    return $modal.open({
        templateUrl: '/partials/modals/alert.html',
        controller: AlertModalInstanceCtrl,
        resolve: {
            data: function () {
                return {
                    type: alert_type,
                    message: message,
                    acknowledge: acknowledge || false
                }
            }
        }
    })
}

var AlertModalInstanceCtrl = function ($scope, $modalInstance, data) {

    var heading = ''

    switch (data.type) {
        case 'error':
            heading = 'Oops'
            break
        case 'working':
            heading = 'Working'
            break
    }

    $scope.alert = {
        type: data.type,
        heading: heading,
        message: data.message,
        acknowledge: data.acknowledge
    }

    $scope.cancel = function () {
        $modalInstance.dismiss('cancelled');
    };
}

不太相關,但是下面是附帶的HTML模板:

<div class="row">
    <div class="col-sm-12">
        <h2 class="modal-header">{{ alert.heading }}</h2>

        <div class="modal-body">
            <div style="text-align: center;">
                <i ng-class="{
                'fa fa-exclamation-triangle fa-5x danger': alert.type=='error',
                'fa fa-info fa-5x info': alert.type=='working'
                }"></i>

                <p>{{ alert.message }}</p>
            </div>
            <button ng-show="alert.acknowledge" class="btn btn-default pull-right" ng-click="cancel()">Ok</button>
        </div>
    </div>
</div>

看起來是$broadcast好用例:

$rootScope.modalAlert = function (alert_type, message, acknowledge) {
     $rootScope.$broadcast('modal:start-open');
     return $modal.open({ 
     ...

然后在您的控制器中:

var AlertModalInstanceCtrl = function ($scope, $modalInstance, data) {
    $scope.$on('modal:start-open', function() { 
        $modalInstance.dismiss('cancelled'); 
    });
    ...

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM