模态显示不正确，当我把它变成一个指令(Modal not showing correctly whe

我无法重现AngularStrap的例子，在这里工作普拉克

我所得到的，当我融入在我的代码这个例子：

（正如你可以看到这是一个有点暗，我不知道为什么...）

我很期待：

其实我花了一整天找这个，但没有运气的解决方案。

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：

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!'};

});

我看不到的地方的问题，谁能告诉我，什么是错的？

我发现，使用@dhaval建议

问题是- 如此地 -父元素有一个固定的或相对位置会发生此行为..

所以刚删除的navbar-static-top属性和它现在的工作：

<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>