我不允许更新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');
}]);
我无法弄清楚为什么模态正在加载整个网站: - /
答案 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'