使用 AngularJS 切换 Twitter Bootstrap (3.x) 模式

Question

我一直在尝试让 Bootstrap 模型在加载时隐藏，然后在单击按钮后显示它，但到目前为止一直没有成功。我是 AngularJS 的新手，所以如果我没有正确执行此操作，请多多包涵。到目前为止，这是我得到的：

模态 Angular 指令 (modal.js):

angular.module('my.modal', ['modal.html'])
.directive('myModal', function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: false,
        templateUrl: 'modal.html',
        link: function(scope, element, attrs) {
            element.modal('hide')
            scope.toggleModal = function() {
                if (attrs.showModal === true) {
                    element.modal('hide')
                    attrs.showModal = false
                } else {
                    element.modal('show')
                    attrs.showModal = true
                }
            }
        }
    };
});

模态模板（modal.html）：

<div id="{{id}}" showModal="false" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body">
                <div class="content" ng-transclude></div>
            </div>
            <div class="modal-footer">
            <button class="btn btn-primary" ng-click="showModal = false">Cancel</button>
            </div>
        </div>
    </div>
</div>

最后，切换模式的按钮 (index.html)：

...
<my-modal>
    <p>Some content</p>
</my-modal>
<button class="btn btn-default" type="button" ng-click="toggleModal()">Toggle me!</button>
...

所有这一切只是在页面加载时显示模态（在我的 header 和所有其他内容之间，因此它不会浮动在任何内容之上）并且切换按钮不起作用。

Answer 1

我已经设法通过使用 Bootstrap 3 模态属性和动态更改样式以及基于显示或隐藏状态的模态指令的类使其工作，虽然没有动画:

模态 Angular 指令 (modal.js):

angular.module('my.modal', ['modal.html'])
.directive('myModal', [function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: false,
        templateUrl: 'modal.html',
        controller: 'ModalCtrl',
        link: function(scope, element, attrs) {
            if (attrs.title === undefined) {
                scope.title = 'Modal Title Placeholder';
            } else {
                scope.title = attrs.title;
            }

            scope.$watch('showModal', function (value) {
                if (value) {
                    scope.displayStyle = 'block';
                    scope.modalFadeIn = 'in';
                } else {
                    scope.displayStyle = 'none';
                    scope.modalFadeIn = '';
                }
            });
        }
    };
}).controller('ModalCtrl', ['$scope', function ($scope) {
    $scope.toggleModal = function() {
        $scope.showModal = !$scope.showModal;
    };

    $scope.$open = function() {
        $scope.showModal = true;
    };

    $scope.$close = function() {
        $scope.showModal = false;
    };
});

模态模板（modal.html）：

<div role="dialog" tabindex="-1" class="modal fade" ng-init="showModal = false" ng-show="showModal" ng-style="{display: displayStyle}" ng-class="modalFadeIn">
    <div class="modal-backdrop fade in" style="height: 100%"> </div>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">{{title}}</h3>
            </div>
            <div class="modal-body">
                <div class="content" ng-transclude></div>
            </div>
        </div>
    </div>
</div>

打开模式的调用可以使用 open 或 toggleModal 函数完成。需要在模态中放置一个自定义按钮来关闭模态。

使用 AngularJS 切换 Twitter Bootstrap (3.x) 模式

Toggling a Twitter Bootstrap (3.x) Modal using AngularJS

modal-dialog

twitter-bootstrap

angularjs

angularjs-directive

twitter-bootstrap-3