模态显示不正确，当我把它变成一个指令 [英] Modal not showing correctly when i put it into a Directive
问题描述
我无法重现 AngularStrap的例子，在这里工作的普拉克
I can't reproduce the AngularStrap's example, here a working plunk
（正如你可以看到这是一个有点暗，我不知道为什么...）
(As you can see it's a bit darker, i don't know why...)
其实我花了一整天找这个，但没有运气的解决方案。
Actually I spent a whole day looking for solution for this but no luck.
guest.html
guest.html
<body ng-app="module.app">
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top">
<div topbar></div>
</nav>
<div class="row">
<div ui-view></div>
</div>
</div>
</body>
顶栏directive.js：
topBar directive.js :
topBarModule.directive('topbar', function() {
return {
restrict: 'EAC',
templateUrl: 'app/shared/topBar/topBar.html',
controller: 'TopBarController'
//ad controller for more controll logged user etc....
};
});
topBar.html：
topBar.html:
<div class="container-fluid">
...
<div class="collapse navbar-collapse">
<button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
<br>
<small>(using an object)</small>
</button>
</div>
...
</div>
topBarController.js：
topBarController.js:
var topBarModule = angular.module('module.topBar', ['ui.router','mgcrea.ngStrap','ngAnimate','ngSanitize']);
topBarModule.controller('TopBarController', function($cookieStore,$scope,Session,Department,Auth,$window,$modal,$rootScope) {
//..
$rootScope.modal = {title: 'Title', content: 'Hello Modal<br />This is a multiline message!'};
});
我看不到的地方的问题，谁能告诉我有什么不对？
I can't see where's the problem, can anyone tell me what's wrong?
推荐答案
我发现，使用@dhaval建议
I found it, using @dhaval suggestion
问题是 - 由于这里提到 - 即父元素有一个固定的或相对位置会发生此行为。
The problem is - As mentioned here - that the parent element have a fixed or relative position this behavior will occur..
所以刚删除的导航栏静态顶属性，它现在的工作：
So just deleted the navbar-static-top attribute and it's work now:
<body ng-app="module.app">
<div class="container-fluid">
<!-- <nav class="navbar navbar-inverse navbar-static-top"> -->
<nav class="navbar navbar-inverse">
<div topbar></div>
</nav>
<div class="row">
<div ui-view></div>
</div>
</div>
</body>
这篇关于模态显示不正确，当我把它变成一个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
