[英]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.