任何人都有一个简单的指令来自动显示Bootstrap模式吗?在Bootstrap 3中,他们取消了自动显示模态的功能,因此我不能使用有角度的ng-if show块。任何帮助都会很棒。
已针对angular 1.2和Bootstrap 3.1.1更新: http : //embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/
我扩展了Ender2050的答案,因此该指令没有孤立的范围。这意味着模态内容可以包含对范围对象的引用。同时重用指令属性,因此仅需要一个属性。
app.directive("modalShow", function ($parse) { return { restrict: "A", link: function (scope, element, attrs) { //Hide or show the modal scope.showModal = function (visible, elem) { if (!elem) elem = element; if (visible) $(elem).modal("show"); else $(elem).modal("hide"); } //Watch for changes to the modal-visible attribute scope.$watch(attrs.modalShow, function (newValue, oldValue) { scope.showModal(newValue, attrs.$$element); }); //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.) $(element).bind("hide.bs.modal", function () { $parse(attrs.modalShow).assign(scope, false); if (!scope.$$phase && !scope.$root.$$phase) scope.$apply(); }); } }; });
用法:
<div modal-show="showDialog" class="modal fade"> ...bootstrap modal... </div>