我有一个使用ng-repeat的离子滑动盒,显示从远程服务器获取的图像.
<ion-slide-Box on-slide-changed="slideChanged(index)" auto-play="true" does-continue="true"> <ion-slide ng-repeat="slide in files"> <img ng-src="{{slide.filename}}" > </ion-slide> </ion-slide-Box>
和js：
$scope.getFiles = function() {
Files.query({
//some parameters
}).$promise.then(function(data) {
$scope.files = data;
});
当调用getFiles()(触发此处未显示的服务)时,$scope.files会成功更新.但DOM(加载到离子滑动盒中的图像)不会自动更新.如何刷新DOM？我已经尝试了超时(没有任何反应)和$scope.$apply(抛出$dispatch已经引发的错误.)
即使这是一个移动应用程序,在桌面浏览器中进行测试时,我可以重新调整浏览器的大小,并自动显示图像.所以我要么弄清楚如何保持更新,要么找到一个更好的图像滑块/轮播使用.
解决方法
你需要等待ng-repeat渲染才能更新()你的幻灯片,使用这个指令：
angular.module('starter')
.directive('repeatDone',function () {
return function (scope,element,attrs) {
if (scope.$last) { // all are rendered
scope.$eval(attrs.repeatDone);
}
}
})
HTML：
<ion-slide-Box> <ion-slide ng-repeat="day in week" repeat-done="repeatDone()" >
在你的控制器中
$scope.getFiles = function() {
Files.query({
//some parameters
}).$promise.then(function(data) {
$scope.week = data;
});
$scope.repeatDone = function() {
$ionicSlideBoxDelegate.update();
//$ionicSlideBoxDelegate.slide($scope.week.length - 1,1);
};
