简单角指令的引导模态 [英] Simple Angular Directive for Bootstrap Modal

问题描述

任何人都有一个简单的指令，自动显示一个引导模式？在引导他们3抢走自动显示模态，所以我不能用一个角度NG-如果显示模块的能力。任何帮助将是巨大的。

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.

推荐答案

更新了角度1.2安培;引导3.1.1：<一href=\"http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/\">http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/

我扩展Ender2050的回答这样的指令不具有分离的范围。这意味着模式的内容可以包含对范围的对象引用。所以只需要一个属性也重用指令属性

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

    };
});

用法：

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

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