Bootstrap Modal 的简单角度指令 [英] Simple Angular Directive for Bootstrap Modal

问题描述

有人有一个简单的指令来自动显示 Bootstrap 模式吗?在 Bootstrap 3 中，他们取消了自动显示模态的能力，所以我不能使用有角度的 ng-if 显示块.任何帮助都会很棒.

解决方案

针对 angular 1.2 和 Angular 进行了更新Bootstrap 3.1.1:http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/

我扩展了 Ender2050 的答案，因此该指令没有孤立的范围.这意味着模态内容可以包含对作用域对象的引用.还要重用指令属性，因此只需要一个属性.

app.directive("modalShow", function ($parse) {返回 {限制:A"，链接:函数(范围、元素、属性){//隐藏或显示模态scope.showModal = 函数(可见，元素){如果(！元素)元素 = 元素；如果(可见)$(elem).modal("show");别的$(elem).modal("隐藏");}//观察modal-visible属性的变化scope.$watch(attrs.modalShow, function (newValue, oldValue) {scope.showModal(newValue, attrs.$$element);});//通过UI操作(确定，取消等)关闭对话框时更新可见值$(element).bind("hide.bs.modal", function () {$parse(attrs.modalShow).assign(scope, false);如果 (!scope.$$phase && !scope.$root.$$phase)范围.$应用()；});}};});

用法:

...引导模式... </div>

Anyone have a simple directive to automatically show a Bootstrap modal? In Bootstrap 3 they took away the ability to automatically show the modal so I can't use a angular ng-if show block. Any help would be great.

解决方案

Updated for angular 1.2 & Bootstrap 3.1.1: http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/

I extended Ender2050's answer so the directive does not have an isolated scope. This means the modal contents can contain references to scope objects. Also reuse the directive attribute so only one attribute is needed.

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();
            });
        }

    };
});

Usage:

<div modal-show="showDialog" class="modal fade"> ...bootstrap modal... </div>

这篇关于Bootstrap Modal 的简单角度指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！