twitter-bootstrap 从控制器触发模态弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34088307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
trigger modal popup from controller
提问by MrProgram
I have a bootstrap modal popup which I fill with data from my modalcontroller. After I filled it with data I would like to show it. To be able to show the modalpopup straight away when going into the page I would like to trigger it directly. Right now I have a button which does that, but how can I do it automatic in a proper way?
我有一个 bootstrap 模态弹出窗口，其中填充了来自我的模态控制器的数据。在我用数据填充它之后，我想展示它。为了能够在进入页面时立即显示 modalpopup，我想直接触发它。现在我有一个按钮可以做到这一点，但是我怎样才能以正确的方式自动完成呢？
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" ng-init="getAllItems()">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="">
<form class="form-horizontal" name="form" role="form">
<div ng-repeat="item in items">
<input type="radio" name="fundselector" ng-model="item" ng-value="item"/> {{item}} <br />
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My controller:
我的控制器：
angular.module("Modal")
.controller("ModalController",
[
"$scope", "$rootScope", "$location", "ModalService", "AuthenticationService",
function ($scope, $rootScope, $location, ModalService, AuthenticationService) {
AuthenticationService.GetCurrentWindowsUser(function(username) {
$scope.username = username;
});
$scope.getAllItems = function () {
AuthenticationService.GetCurrentWindowsUser(function (username) {
if (username) {
AuthenticationService.GetItems(username, function (items) {
$scope.items = items;
//Trigger modalpopup here
});
}
});
}
}
]);
回答by mgiesa
Don't use jquery, use angular-ui.
不要使用jquery，使用angular-ui。
https://angular-ui.github.io/bootstrap/#/modal
https://angular-ui.github.io/bootstrap/#/modal
You can open the modal programmatically like below, and pass your data in in the resolve. This is copy and pasted straight from their example.
您可以像下面那样以编程方式打开模态，然后在 resolve.properties 中传递您的数据。这是直接从他们的示例中复制和粘贴的。
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
回答by vicky
Find element by angular.element and hide.
通过 angular.element 查找元素并隐藏。
var popup = angular.element("#modal-default");
//for hide model
popup.modal('hide');
//for show model
popup.modal('show');
回答by hard coder
Try something like this -
尝试这样的事情 -
$('#yourModalId').modal('show');
$('#yourModalId').modal('show');
回答by R. Salisbury
To fix your example, I created a service that would open the modal and attached it to the outer controller and the modal controller. I had to remove the "modal" class from the modal because it had a display:noneattribute on it. Hereis a fiddle that shows what I did. However, @mgiesa's answer is better.
为了修复您的示例，我创建了一个可以打开模态并将其附加到外部控制器和模态控制器的服务。我不得不从模态中删除“模态”类，因为它有一个display:none属性。 这是一个小提琴，显示了我所做的。但是，@mgiesa 的答案更好。
