一尘不染

引导模态的简单角度指令

angularjs

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


阅读 237

收藏
2020-07-04

共1个答案

一尘不染

已针对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>
2020-07-04