Ste*_*man 6 jquery-plugins twitter-bootstrap angularjs
我试图使用bootstrap scollspy来突出显示由角度转发器生成的列表项.
我遇到的问题是,在角度已将模型更改应用于视图之前,我正在从角度控制器刷新scrollspy插件.
确保在更新DOM本身(不仅仅是角度模型)后发生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')
}
不知道任何关于滚动间谍,这里是你一般多少希望在转角使用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'或其上的任何内容.
我希望有所帮助.
我如何解决这个问题，使用 Blesh 的答案
模板：
<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>
角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(...)的第三个参数。不幸的是，这个解决方案仍然会导致randomguy在评论中提到的无法识别的表达问题。我最终通过在手表功能中使用超时解决了这个问题。