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