javascript - Bootstrap 和 Angular ng-include 指令

Question

所以，我有以下情况:在我的主index.html页面中:

<aside>
    <ul class="nav nav-pills nav-stack" id="myAffix">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</aside>

在我的menus.js中:

 $('#myAffix').affix({
        offset: {
            top: 100
        }
    });

这应该使无序列表在向下滚动 100px 后保持不变。它完美地完成了这项工作。

但是，将我的aside移至另一个.html文件(aside.html)，并将其包含在我的index.html中，如下所示:

<div ng-include="'aside.html'"></div>

aside 元素将不再粘连。我还在index.html 的body 标记末尾加载脚本。我该如何解决这个问题？

Answer 1

编辑:工作插件解决方案:http://plnkr.co/edit/rQJt3h

是的，您遇到了加载顺序问题。解决方案涉及使用指令。

在我看来，当人们告诉不要将 jQuery 与 AngularJS 一起使用时，他们是固执己见的。是的 - 您应该在指令中执行所有 DOM 操作。

为了使用 Bootstrap JavaScript 插件，您可以将词缀初始化包装在指令中:

app.directive('bootstrapAffix', function() {
  return {
    link: function(scope, element, attrs) {
      $(element).affix({ offset: $(element).parent().offset().top });
    }
  }
});

然后将其附加到您的元素:

<aside bootstrap-affix> ... </aside>

记住包含 CSS!