Angular Bootstrap模式将整页加载到模态(13.0)

时间:2015-12-15 18:54:49

标签: javascript angularjs twitter-bootstrap angular-ui-bootstrap bootstrap-modal

我正在关注Bootstrap AngularJS 13.0

的文档

我不允许更新bootstrap(由于各种原因)。

我几乎完全复制了文档,但是我得到了以下效果(整个网站被加载到模态中,忽略黑框):

Boot strap problem, ignore black boxes.

我的代码如下:

navbar.html

<!-- Options drop down for not logged in. -->
        <div ng-hide="UserInfoService.isLoggedIn()" class="navbar-options pull-right" dropdown keyboard-nav dropdown-toggle>
            <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
                <li role="menuitem"><a ng-click="openRegisterModal();">{{'Register' | translate}}</a></li>
                <li class="divider"></li>
                <li role="menuitem"><a href="#">{{'Login' | translate}}</a></li>
            </ul>
        </div>

Navbar控制器,包括注入的 $modal

$scope.openRegisterModal = function() {
        $modal.open({
            animation: true,
            templateUrl: 'register-modal.html',
            controller: 'RegisterModalController',
            size: 'sm'
        });
    };

注册模式模板,在其自己的文件中

<div ng-controller="RegisterModalController">
<script type="text/ng-template" id="register-modal.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        Test body
    </div>
    <div class="modal-footer">
        Test footer
    </div>
</script>
</div>

注册模态控制器,控制台日志在打开时调用一次。

'use strict';

//Instance of register modal.
angular.module('passionForgeApp').controller('RegisterModalController', ['$scope',  function ($scope) {

    console.log('Did load RegisterModalController');

}]);

我无法弄清楚为什么模态正在加载整个网站: - /

2 个答案:

答案 0 :(得分:1)

这是因为如果你想加载模态,你需要在同一个html中包含模板..有点傻了虽然这是自动的。

无论如何解决这个问题的代码是:

<div ng-include="'app/components/some-modal/some-modal.html'"></div>

答案 1 :(得分:1)

您的templateUrl可能不正确。这可以做到:

templateUrl: 'app/components/some-modal/some-modal.html'