Question

我有一个带div的html页面：

<div id="divLogin" ng-include="'App_2/View/login.html'"></div>

我的login.html：

<div class="modal fade" id="myLoginModal" role="dialog">
    <div class="modal-dialog" ng-controller="loginCtrl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <h5 id="lblLoginError" class="alert-info">{{errorMessage}}</h5>
                <div class="form-group">
                    <label for="User" class="sr-only">User</label>
                    <input type="text" name="User" id="LoginUser" ng-model="userName" class="form-control" placeholder="User">
                </div>
                <div class="form-group">
                    <label for="key" class="sr-only">Password</label>
                    <input type="password" name="key" id="LoginPassword" ng-model="password" class="form-control" placeholder="Password">
                </div>
                <button class="btn btn-success" data-loading-text="Loading..." id="btnLogin" ng-click="login()">Login</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="hideModal()">Close</button>
            </div>
        </div>
    </div>
</div>

在我的控制器中，我从loginModal服务调用方法showModal：

app.factory('loginModal', function () {

    var loginBtn = angular.element("#btnLogin");
    var loginModal = angular.element('#myLoginModal');

    return {
        resetBtn: function () {
            loginBtn.button('reset');
        },

        loadBtn: function () {
            loginBtn.button('loading');
        },

        showModal: function () {
            loginModal.modal('show');
        },

        hideModal: function () {
            loginModal.modal('hide');
            loginBtn.button('reset');
        }
    };
});

如果我直接在divLogin中添加login.html中的html，一切正常但是当我使用ng-include时，当我调用modal（）时，模型不会打开。 angular.element('#myLoginModal')在两种情况下都会获取元素，因此可以从我看到的内容中正确加载模态。

我是否必须重新引导bootstrap modal（）函数或者我在这里缺少什么？

Answer 1

在通过ng-include完成模态渲染之前，变量似乎已实例化。即使我可以认为模态对象是在我的服务变量中呈现的，但它们在某种程度上是垃圾。在服务方法中重置它们后，在ng-include中加载登录视图时一切正常。

工作解决方案：

showModal: function () {
    loginModal = angular.element('#myLoginModal');
    loginModal.modal('show');
},

Angularjs ng-include禁用bootstrap modal（）

1 个答案: