模态显示不正确，当我把它变成一个指令

本文介绍了模态显示不正确，当我把它变成一个指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时删除！！

我无法重现，在这里工作的

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

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

这篇关于模态显示不正确，当我把它变成一个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..

Topbar