当我将它放入指令时模态显示不正确 [英] Modal not showing correctly when i put it into a Directive
本文介绍了当我将它放入指令时模态显示不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法重现 - 父元素具有固定或相对位置，这种行为会发生..
所以刚刚删除了 navbar-static-top 属性，现在它可以工作了:
<div class="container-fluid"><!-- <nav class="navbar navbar-inverse navbar-static-top">--><nav class="navbar navbar-inverse"><div 顶栏></div></nav><div class="row"><div ui-view></div>I can't reproduce the AngularStrap's example, here a working plunk
What I get when I integrate this example in my code:
(As you can see it's a bit darker, i don't know why...)
What I'm expecting:
Actually I spent a whole day looking for solution for this but no luck.
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>
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:
<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:
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?
解决方案
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屋！
查看全文
