Angularjs 引导模式的简单角度指令

有人有简单的指令自动显示引导模式吗？在Bootstrap3中，他们取消了自动显示模式的功能，因此我不能使用角度ng if显示块。任何帮助都很好。

这里有一个角度指令，它将隐藏和显示引导模式

app.directive("modalShow", function () {
    return {
        restrict: "A",
        scope: {
            modalVisible: "="
        },
        link: function (scope, element, attrs) {

            //Hide or show the modal
            scope.showModal = function (visible) {
                if (visible)
                {
                    element.modal("show");
                }
                else
                {
                    element.modal("hide");
                }
            }

            //Check to see if the modal-visible attribute exists
            if (!attrs.modalVisible)
            {

                //The attribute isn't defined, show the modal by default
                scope.showModal(true);

            }
            else
            {

                //Watch for changes to the modal-visible attribute
                scope.$watch("modalVisible", function (newValue, oldValue) {
                    scope.showModal(newValue);
                });

                //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
                element.bind("hide.bs.modal", function () {
                    scope.modalVisible = false;
                    if (!scope.$$phase && !scope.$root.$$phase)
                        scope.$apply();
                });

            }

        }
    };

});

用法示例#1-假设您希望显示模式-您可以添加ng if作为条件

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

---

我急切地想看看人们能想出什么其他的解决办法。干杯

针对angular 1.2和Bootstrap 3.1.1更新：

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

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>

…引导模式。。。

只需将此插头插入即可，效果非常好。感谢您的快速响应和Bootstrap 4:）的链接，“但现在不想包含一个大库”-因此我决定包含jQuery和Bootstrap的JavaScript。。。呃……这是可行的，但在我关闭popover后，它不会将控制器范围内的showDialog以及可见的属性modal再次变为false。只有它从DOM中消失，但这种更改不会反映在模型中。我该怎么办？这仍然有效吗？有可能成为一名警察吗？当我尝试使用它时，我得到了TypeError:Object[Object Object]没有“modal”方法。我不明白为什么这里需要$scope.$apply（）（我知道是这样）？这就像一个符咒，只是模态消失在我的引导导航栏后面（由于模态在DOM树中的位置）。我通过将$（elem.modal（“show”）更改为$（elem.appendTo（“body”）.modal（“show”）解决了这个问题。

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>