Question

我无法在Angular中显示此引导模式窗口...任何帮助都将不胜感激。

当我点击“登录”时，我知道toggleModal()函数正在被触发（我已经测试过了），但模态窗口没有显示。我的visible=showModal中的index.ejs属性似乎不起作用。

index.ejs

 <a href="" ng-click="toggleModal()">Log in</a>

        <modal title="Login form" visible="showModal">
            <form role="form">
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" />
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" />
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </modal>

主控制器

    $scope.showModal = false;

    $scope.toggleModal = function(){
        $scope.showModal = !$scope.showModal;
    };

模态指令

angular.module('TechStretcher').directive('modal', function () {
    return {
        template: '<div class="modal fade">' +
        '<div class="modal-dialog">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
        '<h4 class="modal-title">{{ title }}</h4>' +
        '</div>' +
        '<div class="modal-body" ng-transclude></div>' +
        '</div>' +
        '</div>' +
        '</div>',
        restrict: 'E',
        transclude: true,
        replace:true,
        scope:true,
        link: function postLink(scope, element, attrs) {
            scope.title = attrs.title;

            scope.$watch(attrs.visible, function(value){
                if(value == true)
                    $(element).modal('show');
                else
                    $(element).modal('hide');
            });

            $(element).on('shown.bs.modal', function(){
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = true;
                });
            });

            $(element).on('hidden.bs.modal', function(){
                scope.$apply(function(){
                    scope.$parent[attrs.visible] = false;
                });
            });
        }
    };
});

Answer 1

作为一个框架，Bootstrap已经包含一个显示/隐藏模态的简单机制，并负责处理过程中涉及的JavaScript，因此您不必自己编写。

以下是如何在Bootstrap模式中执行登录表单：

模态内容

<div class="modal fade" id="loginForm" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm dash-modal" role="document">
        <div class="modal-content">

            <input id="edit-type" type="hidden">
            <input id="edit-balance" type="hidden">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Login form</h4>
            </div>

            <div class="modal-body">

                <form role="form">
                    <div class="form-group">
                        <label for="email">Email address</label>
                        <input type="email" class="form-control" id="email" placeholder="Enter email" />
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" placeholder="Password" />
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary" data-dismiss="modal">Submit</button>
            </div>

        </div>
    </div>
</div>

模态开场白

<a class="btn btn-primary btn-xs" data-target="#loginForm" data-toggle="modal">Log in</a>

我希望这会有所帮助，如果出现问题，请告诉我。

无法获得模态窗口显示

1 个答案: