在角度模型更改后刷新Bootstrap ScrollSpy
我尝试使用bootstrap scollspy来突出显示由角度中继器生成的列表项。
我遇到的问题是，在angular将模型更改应用到视图之前，我正在从一个angular控制器刷新scrollspy插件。
在DOM本身被更新(不仅仅是angular模型)之后，有什么angular的方法来确保scrollspy('refresh')调用发生？
模板：
<div class="span2" id="addressList">
<ul class="nav nav-tabs nav-stacked affix">
<li ng-repeat="addr in addresses"><a href="#{{addr.id}}">{{addr.id}}</a></li>
</ul>
</div>控制器：
$scope.httpSuccessCallback = function (data)
$scope.addresses.push(data);
$('[data-spy="scroll"]').scrollspy('refresh'); //calls $('#addressList .nav > li > a')
}回答 4
Stack Overflow用户
发布于 2013-02-07 14:36:08
我是如何解决这个问题的，使用Blesh's
模板：
<body ng-app="address" ng-controller="AddressCtrl" scroll-spy="addresses">
<div class="container">
<form ng-submit="lookupAddress()">
<input type="text" ng-model="addressText" />
<button id="addressQueryBtn">Submit</button>
</form>
<div id="addressList">
<ul>
<li ng-repeat="addr in addresses">{{addr}}</li>
</ul>
</div>
</div>
</body>Angular JS：
angular.module('address', []).
directive('scrollSpy', function($timeout){
return function(scope, elem, attr) {
scope.$watch(attr.scrollSpy, function(value) {
$timeout(function() { elem.scrollspy('refresh') }, 200);
}, true);
}
});
function AddressCtrl($scope, $http) {
$scope.addresses = [];
$scope.lookupAddress = function() {
$scope.addresses.push($scope.addressText);
$scope.addressText = '';
};
}scope.watch(...)的第三个参数当被监视的作用域变量是对象或数组时需要。不幸的是，这个解决方案仍然会导致评论中提到的不可识别的表达式问题。我最终在watch函数中通过using a timeout解决了这个问题。
Stack Overflow用户
发布于 2013-01-11 18:36:37
在不了解scroll spy的情况下，以下是在Angular中使用JQuery插件的一般方法：
app.directive('scrollSpy', function (){
return {
restrict: 'A',
link: function(scope, elem, attr) {
elem.scrollSpy({ /* set up options here */ });
//watch whatever expression was passed to the
//scroll-spy attribute, and refresh scroll spy when it changes.
scope.$watch(attr.scrollSpy, function(value) {
elem.scrollSpy('refresh');
});
}
};
});然后在HTML中：
<div scroll-spy="foo">Do something with: {{foo}}</div>上面的例子是非常通用的，但它基本上会将你的插件应用到一个元素上，并在每次$scope.foo改变时调用'refresh‘或其他任何东西。
我希望这能有所帮助。
Stack Overflow用户
发布于 2013-08-05 21:18:17
在Angular中使用Scrollspy有一些挑战(可能是为什么AngularUI到2013年8月还没有包含Scrollspy )。
- 您必须在任何时候对DOM内容进行任何更改时刷新scrollspy。
如这里所建议的，这可以通过刷新元素并为scrollspy(‘$watching’)调用设置超时来完成。
- 如果您希望能够使用nav元素来导航可滚动区域，则需要覆盖nav元素的默认行为。
这可以通过使用preventDefault来阻止导航和附加scrollTo函数来实现。
我在Plunker上抛出了一个工作示例：http://plnkr.co/edit/R0a4nJi3tBUBsluBJUo2?p=preview
https://stackoverflow.com/questions/14284263
复制相似问题
腾讯云开发者
