当我将它放入指令时模态显示不正确

Question

我无法重现 AngularStrap's example, here a working plunk

将此示例集成到我的代码中后得到的结果：

（大家可以看到有点暗，不知道为什么...）

我期待的是：

实际上我花了一整天的时间寻找解决方案，但没有运气。

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

});

我看不出哪里出了问题，谁能告诉我哪里出了问题？

Answer 1

我找到了，使用@dhaval 的建议

问题是 - As mentioned here - 父元素具有固定或相对位置，此行为将发生..

所以刚刚删除了 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>

当我将它放入指令时模态显示不正确

Modal not showing correctly when i put it into a Directive

angularjs

angularjs-directive

angular-ui-router

angular-strap

将此示例集成到我的代码中后得到的结果：

我期待的是：