现在我们可以简单地观看 $allImagesLoaded 例如在滑块中:
scope.$on('$allImagesLoaded', function() {_initSlider(元素);});
概括它(如果你愿意)(演示)
我们可以再次分解它并在应用范围内应用这种方法来为任何ng-repeat完成或ng-src 加载，这并不总是必要的(1)，但可能非常有用.让我们看看如何:
修饰 ng-src 指令，以便在加载图像时发送事件:
app.config(function($provide) {$provide.decorator('ngSrcDirective', function($delegate) {var 指令 = $delegate[0],链接 = 指令.链接；指令.编译=函数(){返回函数(范围，元素，属性){link.apply(this, arguments);element.bind('load', function() {scope.$emit('$imageLoaded');});};};返回 $delegate;});//...});
装饰 ng-repeat 以在完成时通知:
app.config(function($provide) {//...$provide.decorator('ngRepeatDirective', function($delegate) {var 指令 = $delegate[0],链接 = 指令.链接；指令.编译 = 函数(){返回函数(范围，元素，属性){link.apply(this, arguments);scope.$watch('$$childTail.$last', function(newVal, oldVal) {newVal &&scope.$emit('$repeatFinished');});};};返回 $delegate;});});
现在可以在任何地方捕捉事件，例如在您的滑块指令中:
var repeatFinished = false;var loadCount = 0;scope.$on('$repeatFinished', function() {重复完成 = 真；});scope.$on('$imageLoaded', function () {if (repeatFinished &&loadCount++ === scope.videos.objects.length - 1) {_initSlider();//这是在任何地方定义的}});
这似乎违背了初衷，因为我们又回到了原点，但它可能非常强大.还有—看，妈妈，没有新指令！
<img class="thumb-recipe" ng-src="{{ object.tile_url }}"/>
TL; DR，给我一个演示！！!
<小时>
1.必须仔细考虑装饰，因为结果将在应用程序加载的每个图像上发送一个事件.
<小时>
• 从 1.3.x 版本开始，将无法覆盖 link 函数.
I'm experiencing some problems regarding manipulation of the DOM after looping through the data.
We have a jQuery slider plugin that is tied to data and works normally, but when using ng-repeat, we have to wrap its initialization with $timeout for it to work — and now that isn't even working.
I think using $timeout is unreliable, which makes for a bad fix. In jQuery I could use $(document).ready() — which was solid, but using angular.element(document).ready() doesn't seem to work either.
The slider directive is invoked but cannot obtain the height of the images in the slider because the images have not been loaded into the DOM — resulting in the slider having a calculated height of 0.
I'm finding it very frustrating at the moment - there must be a way to manipulate the DOM after data (in an ng-repeat for example) has cycled through.
The Initialization of the slider is performed as follows:
var sliderLoad = function () {
$timeout(function () {
var setHeight = elem.find('.slide:eq(0)').outerHeight(true);
elem.css({
height: setHeight
});
}, 1000);
// Show the slider nav buttons
elem.parent().find('.direction-nav').show();
};
… and here is a reproduction demo.
解决方案
Quick-'n-Dirty it (Demo)
We would want to make sure that all images are loaded, so let's write a directive for that:
app.directive('loadDispatcher', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
scope.$emit('$imageLoaded');
});
}
};
})
… and attach it to the ng-src'd elements:
<img class="thumb-recipe" ng-src="{{ object.tile_url }}" load-dispatcher/>
Now we can compare the number of events caught with our model, and act as needed:
var loadCount = 0;
scope.$on('$imageLoaded', function () {
if (loadCount++ === scope.videos.objects.length - 1) {
_initSlider(); // act!
}
});
This is a little disturbing, as it's not adhering to the Law of Demeter — any directive that will watch the $imageLoaded event will have to know about the model (scope.videos.objects.length).
We can prevent this coupling by finding out how many images were loaded without explicitly addressing the model. Let's assume that the events will be handled in an ng-repeat.
Make sure ng-repeat has finished, and fire an event with the items count. We can do that by attaching a controller with a sole purpose - to watch the $last property. Once it's found (with a truthy value), we will fire an event to notify about it:
.controller('LoopWatchCtrl', function($scope) {
$scope.$watch('$last', function(newVal, oldVal) {
newVal && $scope.$emit('$repeatFinished', $scope.$index);
});
})
<div ng-repeat="object in videos.objects" ng-controller="LoopWatchCtrl">
Now, catch the events and activate the slider initialization accordingly:
var loadCount = 0,
lastIndex = 0;
scope.$on('$repeatFinished', function(event, data) {
lastIndex = data;
});
scope.$on('$imageLoaded', function() {
if (lastIndex && loadCount++ === lastIndex) {
_initSlider(element); // this is defined where-ever
}
});
There, now our directive does not have to know about the model. But, it's a bit cumbersome, now we have to tie a directive and a controller.
Let's extract this whole shabang into a single directive:
app.directive('imageLoadWatcher', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
if (typeof $rootScope.loadCounter === 'undefined') {
$rootScope.loadCounter = 0;
}
element.find('img').bind('load', function() {
scope.$emit('$imageLoaded', $rootScope.loadCounter++);
});
},
controller: function($scope) {
$scope.$parent.$on('$imageLoaded', function(event, data) {
if ($scope.$last && $scope.$index === $rootScope.loadCounter - 1) {
$scope.$emit('$allImagesLoaded');
delete $rootScope.loadCounter;
}
});
}
};
});
… which will be applied to the ng-repeated element:
<div ng-repeat="object in videos.objects" class="slide" image-load-watcher>
Now we can simply watch $allImagesLoaded e.g. in the slider:
scope.$on('$allImagesLoaded', function() {
_initSlider(element);
});
Generalize it (if you want to) (Demo)
We can break it down again and apply this approach app-wide to use event dispatching for any ng-repeat finish or ng-src load, which is not always necessary (1), but can be quite useful. Let's see how:
Decorate the ng-src directive, so it sends an event when an image is loaded:
app.config(function($provide) {
$provide.decorator('ngSrcDirective', function($delegate) {
var directive = $delegate[0],
link = directive.link;
directive.compile = function() {
return function(scope, element, attrs) {
link.apply(this, arguments);
element.bind('load', function() {
scope.$emit('$imageLoaded');
});
};
};
return $delegate;
});
// ...
});
Decorate ng-repeat to notify when it finishes:
app.config(function($provide) {
// ...
$provide.decorator('ngRepeatDirective', function($delegate) {
var directive = $delegate[0],
link = directive.link;
directive.compile = function() {
return function(scope, element, attrs) {
link.apply(this, arguments);
scope.$watch('$$childTail.$last', function(newVal, oldVal) {
newVal && scope.$emit('$repeatFinished');
});
};
};
return $delegate;
});
});
Now can catch the events anywhere, e.g. in your slider directive:
var repeatFinished = false;
var loadCount = 0;
scope.$on('$repeatFinished', function() {
repeatFinished = true;
});
scope.$on('$imageLoaded', function () {
if (repeatFinished &&
loadCount++ === scope.videos.objects.length - 1) {
_initSlider(); // this is defined where-ever
}
});
It seems to defeat the purpose, as we're back to square one, but it can be very powerful. And also — look, mommy, no new directives!
<div ng-repeat="object in videos.objects" class="slide">
<img class="thumb-recipe" ng-src="{{ object.tile_url }}"/>
</div>
Put a sock in it (Demo)
TL;DR, just gimme tha demo ! ! !
1. Decoration has to be considered carefully, as the result will be sending an event on each image loaded across the application.
• Overriding the link function will not be possible in version 1.3.x onwards.
这篇关于AngularJS - 在 ng-repeat 完成后操作 DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
