Boostrap and Angular's ng-include directive

Boostrap and Angular's ng-include directive

本文关键字：ng-include directive and Angular Boostrap      更新时间：2023-09-26

因此，我有以下情况：在我的主index.html页面中：

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

在我的菜单js:

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

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

但是，在将我的side移到另一个.html文件（side.html）并将其包含在我的index.html中之后，如下所示：

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

靠边的元素不会再粘了。我还在index.html中的body标记末尾加载脚本。如何解决这个问题？

EDIT：工作plunker解决方案：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！

相关文章：