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后使无序列表保持不变。它完美地完成了这项工作。

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

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

旁边的元素不再坚持了。我也在index.html的body标签的末尾加载脚本。我该如何解决这个问题？

Answer 1

编辑：工作的plunker解决方案：http://plnkr.co/edit/rQJt3h

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

在我看来，当告诉不要在AngularJS中使用jQuery时，人们会有自己的观点。是的 - 您应该在指令中执行所有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！

Bootstrap和Angular ng-include指令

1 个答案: