Angular 模型更改后刷新 Bootstrap ScrollSpy [英] Refresh Bootstrap ScrollSpy after Angular model changes
问题描述
我正在尝试使用 bootstrap scollspy 来突出显示由角中继器.
我遇到的问题是，在 angular 将模型更改应用于视图之前，我正在从 angular 控制器刷新 scrollspy 插件.
在 DOM 本身(不仅仅是角度模型)更新之后，确保 scrollspy('refresh') 调用发生的角度方式是什么?
模板:
<ul class="nav nav-tabs nav-stacked 词缀"><li ng-repeat="地址中的addr"><a href="#{{addr.id}}">{{addr.id}}</a></li>控制器:
$scope.httpSuccessCallback = 函数(数据)$scope.addresses.push(data);$('[data-spy="scroll"]').scrollspy('refresh');//调用 $('#addressList .nav > li > a')}我是如何解决这个问题的，使用 Blesh 的回答
模板:
<div class="容器"><form ng-submit="lookupAddress()"><input type="text" ng-model="addressText"/><button id="addressQueryBtn">提交</button></表单><div id="地址列表"><ul><li ng-repeat="地址中的addr">{{addr}}</li>Angular JS:
angular.module('address', []).指令('scrollSpy'，函数($超时){返回函数(范围，元素，属性){scope.$watch(attr.scrollSpy, function(value) {$timeout(function() { elem.scrollspy('refresh') }, 200);}， 真的);}});函数地址Ctrl($scope，$http){$scope.addresses = [];$scope.lookupAddress = function() {$scope.addresses.push($scope.addressText);$scope.addressText = '';};}当被观察的范围变量是一个对象或数组时，需要 scope.watch(...) 的第三个参数.不幸的是，这个解决方案仍然导致了评论中randomguy提到的无法识别的表达问题.我最终通过使用超时解决了这个问题在手表功能中.
I am attempting to use the bootstrap scollspy to highlight list items generated by an angular repeater.
The problem I'm running into is that I'm refreshing the scrollspy plugin from an angular controller, before angular has applied the model changes to the view.
What is the angular way to ensure the scrollspy('refresh') call happens after the DOM itself has been updated (not just the angular model)?
Template:
<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>
Controller:
$scope.httpSuccessCallback = function (data)
$scope.addresses.push(data);
$('[data-spy="scroll"]').scrollspy('refresh'); //calls $('#addressList .nav > li > a')
}
How I solved this, using Blesh's answer
Template:
<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 = '';
};
}
The third argument to scope.watch(...) is needed when the watched scope var is an object or array. Unfortunately, this solution still results in the unrecognized expression problem randomguy mentions in the comments. I ultimately resolved this by using a timeout in the watch function.
这篇关于Angular 模型更改后刷新 Bootstrap ScrollSpy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
