所以,我有以下情况:在我的主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 标记末尾加载脚本。我该如何解决这个问题?
最佳答案
编辑:工作插件解决方案: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!
关于javascript - Bootstrap 和 Angular ng-include 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26849076/