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

enter image description here （你可以看到它有点暗，我不知道为什么......）

我期待的是：

enter image description here

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

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

});

我看不出问题在哪里，谁能告诉我什么是错的？

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>

当我将其置于指令中时，模态未正确显示

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

我期待的是：

1 个答案: