Scrollbar指令在Angularjs中不起作用

时间:2015-07-22 17:43:23

标签: javascript css angularjs scroll

我正在尝试在我的项目中使用ng-scrollbar来实现滚动条但不知何故它对我不起作用。我在index.html中包含了以下文件:

<link rel="stylesheet" href="bower_components/ng-scrollbar/dist/ng-scrollbar.css" />
<script src="bower_components/ng-scrollbar/dist/ng-scrollbar.js"></script>

另外,我的玉模板看起来像这样:

<li id="notification-button" class="dropdown notifications-menu"><a href="#notifications" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-bell-o"></i><span class="label label-warning">{{user.notifications.count}}</span></a>
  <ul class="dropdown-menu">
    <li class="header">{{user.notifications.count}} notifications.</li>
    <li> 
      <div ng-scrollbar="ng-scrollbar">
        <ul style="overflow: hidden; width: 100%; height: auto;" class="menu">
          <li ng-repeat="notification in user.notifications"><a href="#"><i class="fa fa-users text-aqua"></i>{{notification.text}}</a></li>
        </ul>
      </div>
    </li>
    <li class="footter"><a href="#">View all</a></li>
  </ul>
</li>

我对应这个块的css如下:

.navbar-nav > .notifications-menu {
  > .dropdown-menu > li .menu {
    // Links inside the menu
    > li > a {      
      color: #444444;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 10px;
      // Icons inside the menu
      > .glyphicon,
      > .fa,
      > .ion {
        width: 20px;
      }
    }

  }
}

对于精确的CSS,您可以查看此https://almsaeedstudio.com/preview。我只是尝试使用滚动条功能实现通知图标。

任何人都可以告诉我我在哪里做错了吗?如果有人能给我一个如何使用它的简单例子,那会很棒吗?

P.S。 :https://github.com/asafdav/ng-scrollbar

由于

0 个答案:

没有答案