Question

的文档

我不允许更新bootstrap（由于各种原因）。

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

我的代码如下：

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');

}]);

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

Answer 1

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

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

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

Answer 2

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

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

Angular Bootstrap模式将整页加载到模态（13.0）

2 个答案: