twitter-bootstrap 动态加载 Bootstrap 模态内容并使用 Angular.js 打开它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35527788/
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
Dynamically Load Bootstrap Modal Content and Open It Using Angular.js
提问by Hasan Can Saral
I am trying to load modal content dynamically and open it when the user clicks a button. I have managed to dynamically load the content using ngInclude, but I cannot open it afterwards. My code:
我正在尝试动态加载模态内容并在用户单击按钮时打开它。我已设法使用 ngInclude 动态加载内容，但之后无法打开它。我的代码：
<div class="modal-container" id="modal-container" ng-include="modal_template"></div>
and my controller.js
和我的 controller.js
function set_modal_template(templateName, callback) {
$scope.modal_template = templateName;
callback();
}
$scope.load_modal_sms = function () {
set_modal_template("/static/partials/modal_template.html", function() {
$('#modal').modal('show');
});
};
and my modal_template.html:
和我的modal_template.html：
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
What is happening is that the content of the modal_content.html loads perfectly, but the modal does not show up. If I click again, I only see the transparent black layer that is behind the modal, blacking out the screen, but not the modal itself.
发生的事情是 modal_content.html 的内容完美加载，但模态没有显示。如果我再次单击，我只会看到模态后面的透明黑色层，使屏幕变黑，而不是模态本身。
Thanks!
谢谢！
回答by Kizer
You can solve this problem using a number of techniques. There are a few modules out there that provide modal service, including angular-ui, and I think these could solve your problems better (and more).
您可以使用多种技术来解决此问题。有一些模块可以提供模态服务，包括 angular-ui，我认为这些可以更好地（甚至更多）解决您的问题。
angular-modal-service
角度模式服务
angular-modal-serviceis a module dedicated to creating modals. It allows providing either a template or a template service, and supports defining a scope for your modal (useful for abstraction).
angular-modal-service是一个专门用于创建模态的模块。它允许提供模板或模板服务，并支持为您的模态定义范围（对抽象有用）。
Your sample code above would be
您上面的示例代码将是
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
// Do not forget to include the module dependency: var myApp = angular.module('myApp', ['angularModalService']);
myApp.controller('MyController', ['ModalService', function (ModalService) {
$scope.load_modal_sms = function () {
var modal = ModalService.showModal({
templateUrl: "/static/partials/modal_template.html",
controller: function () { /* controller code */ }
}).then(function (modal) {
// Modal has been loaded...
modal.element.modal();
});
};
}]);
angular-ui-bootstrap
angular-ui-bootstrap
angular-ui-bootstrap (bower install angular-ui-bootstrap) has a $modalservice that is extremely easy to use:
angular-ui-bootstrap ( bower install angular-ui-bootstrap) 有一个$modal非常好用的服务：
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
// Do not forget to include the module dependency: var myApp = angular.module('myApp', ['ui.bootstrap.modal']);
myApp.controller('MyController', ['$modal', function ($modal) {
$scope.load_modal_sms = function () {
var modal = $modal.open({
templateUrl: "/static/partials/modal_template.html",
scope: { /* custom scope */ }
});
};
}]);
Using your method
使用你的方法
You may want to give angular some time to load and render the loaded template first before trying to .modal() it. If you haven't noticed, your callbackis not doing anything special. You can as well run the code without any callback.
在尝试 .modal() 之前，您可能希望先给 angular 一些时间来加载和呈现加载的模板。如果你没有注意到，你callback没有做任何特别的事情。您也可以在没有任何回调的情况下运行代码。
<div class="modal fade" id="modal" role="dialog" ng-if="detectLoaded()">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
function set_modal_template(templateName) {
$scope.modal_template = templateName;
}
$scope.load_modal_sms = function () {
set_modal_template("/static/partials/modal_template.html");
};
$scope.detectLoaded = function () {
// If this function is called, the template has been loaded...
setTimeout(function () { // Give some time for the template to be fully rendered
$('#modal').modal('show');
}, 10);
return true;
};
You can also remove the timeout by changing the position of the ng-if, or creating a stub element after the div. You can return false from the detectLoaded function to make the stub element not show. I have not tested this last option and don't know if it will work, you have to check.
您还可以通过更改 ng-if 的位置或在 div 之后创建存根元素来删除超时。您可以从 detectLoaded 函数返回 false 以使存根元素不显示。我还没有测试过最后一个选项，不知道它是否有效，你必须检查一下。
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<div ng-if="detectLoaded()"></div>
$scope.detectLoaded = function () {
$('#modal').modal('show');
return false;
};
