刷新引导ScrollSpy后角模式的变革 [英] Refresh Bootstrap ScrollSpy after Angular model changes
问题描述
我试图使用引导scollspy 突出所产生的列表项角中继器。
我遇到的问题是，我从清爽的角度控制器scrollspy插件，前角已应用于视图模型的变化。
什么是保证scrollspy（'刷新'）的DOM本身已经更新后，调用发生的角方式（不只是角度模式）？
模板：
＆LT; DIV CLASS =SPAN2ID =AddressList中＆GT;
＆LT; UL类=净值资产净值的选项卡导航叠词缀＆GT;
＆LT;李NG重复=地址的地址＆GT;＆LT; A HREF =＃{{addr.id}}＆GT; {{addr.id}}＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
控制器：
$ scope.httpSuccessCallback =功能（数据）
$ scope.addresses.push（数据）;
$（'[数据谍=滚动]'）scrollspy（刷新）。 //调用$（'＃AddressList中.nav＆GT;李＆gt;将'）
}
我该如何解决这一点，使用Blesh的答案
模板：
＆LT;机身NG-应用=地址NG控制器=AddressCtrl滚动间谍=地址＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT;形式NG提交=lookupAddress（）＆GT;
＆LT;输入类型=文本NG模型=addressText/＆GT;
＆LT;按钮ID =addressQueryBtn＆GT;提交＆LT; /按钮＆GT;
＆LT; /表及GT; ＆LT; DIV ID =AddressList中＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=地址的地址＆GT; {{addr}指定}＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT; ＆LT; / DIV＆GT;
＆LT; /身体GT;
角JS：
angular.module（'地址'，[]）。
指令（scrollSpy'，函数（$超时）{
返回功能（范围，ELEM，ATTR）{
范围。$腕表（attr.scrollSpy，功能（价值）{
$超时（函数（）{elem.scrollspy（'刷新'）}，200）;
}，真正的）;
}
}）;功能AddressCtrl（$范围，$ HTTP）{
$ scope.addresses = []; $ scope.lookupAddress =功能（）{
$ scope.addresses.push（$ scope.addressText）;
$ scope.addressText ='';
};
}
的第三个参数scope.watch（...）当观看范围VAR是一个对象或数组是必要的。不幸的是，该解决方案还导致无法识别的前pression问题在评论中提到randomguy。我最终由<一个解决了这个href=\"http://stackoverflow.com/questions/11125078/is-there-a-post-render-callback-for-angular-js-directive\">using超时在腕表的功能。
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.
这篇关于刷新引导ScrollSpy后角模式的变革的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
