Angular Directives watching external models

Question

In learning Angular I am creating a simple gallery that can be zoomed. My initial implementation used a simple ng-repeat, but I quickly discovered that based on the zoom of the gallery I would want to change things like the url source (from small to medium thumbs), and probably the css on captions etc.

<div class="photoHolder" ng-repeat="photo in photos | filter:{caption:query} | orderBy:orderProp" ng-attr-style="transition: .3s ease; width: {{thumbWidth}}px; height: {{thumbWidth}}px;">
    <div class="photoClass" data-id="{{photo.id}}" ng-attr-style="background-image:url({{zoomSize < 5 ? photo.thumb_url : photo.medium_url}})"></div>
    <div class="caption">{{photo.caption}}</div>
    <div class="caption">{{photo.date}}</div>
</div>

So, I switched to a much cleaner directive:

<gal-photo class="photoHolder" ng-repeat="photo in photos | filter:{caption:query} | orderBy:orderProp"/>

but the only way I could get the directive element to respond to the zoom change is to add a watch to the zoom inside the link for the element:

link: function(scope, element, attrs) {
    var image = new Image();
    scope.photo.url = scope.zoomSize < 5 ? scope.photo.thumb_url : scope.photo.medium_url;
    scope.$watch('thumbWidth', function() {
           scope.photo.url = scope.zoomSize < 5 ? scope.photo.thumb_url : scope.photo.medium_url;
        element.attr('style',  'transition: .3s; width: ' + scope.thumbWidth + 'px; height: ' + scope.thumbWidth + 'px;');
    });
}

I know that you aren't supposed to abuse watches, and my fear is that with 500 elements in the gallery you are doing 500 watches. But I can find no guidance on responding to external inputs within repeating directives. The two galleries seem to perform about the same, but I am wondering if I am doing this wrong? Here is a fiddle for the original gallery and a fiddle for the directive version.

I liked your original solution with ng-attr-style, because it's less code, but it sounds like this is more of a performance question. I would check out questions like this-> http://stackoverflow.com/questions/20702140/improving-nested-ng-repeat-directive-performance — koolunix, Feb 14 '14 at 00:18
Yeah, I already checked that out... I'm looking for guidance in the way that people handle external inputs within models. Like I said the performance isn't noticeably different. I prefer the directive as it is less HTML and seems more powerful, I was just wondering if I was doing it wrong. — Kris Erickson, Feb 14 '14 at 02:05
This is a really good one too: http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933 — koolunix, Feb 14 '14 at 04:13

score 6 · Answer 1 · answered Feb 18 '14 at 23:29

Your use case is a good candidate for $scope events. Have one watch inside your controller:

$scope.$watch('thumbWidth', function() {
    $scope.$broadcast('thumbWidthChange');
});

And then in your directive register listeners for this event:

scope.$on('thumbWidthChange', function(){
    scope.photo.url = scope.zoomSize < 5 ? scope.photo.thumb_url : scope.photo.medium_url;
    element.attr('style',  'transition: .3s; width: ' + scope.thumbWidth + 'px; height: ' + scope.thumbWidth + 'px;');
});

Scope event listeners are only called when their events are fired, so this should limit the watch list and optimize performance.

Here is an updated fiddle based on your example using the events method: http://jsfiddle.net/dv7fy/1/

As a side note, performance of Angular watches scales better than what most think, have a look at this example (still on Angular 1.0.3, should be even better on latest version): http://jsfiddle.net/mhevery/cXMPJ/11/

score 3 · Accepted Answer · edited May 23 '17 at 12:03

I think Beyers is right that watches are actually pretty efficient.

Still, here's how you could do this with a single watch by using a parent directive for the whole image gallery:

myApp.directive('imageGallery', function() {
return {
    restrict: 'A',
    controller: function($scope, $element, $attrs) {
        function updatePhotos() {
            $element.children().attr('style',  'transition: .3s; width: ' + $scope.thumbWidth + 'px; height: ' + $scope.thumbWidth + 'px;');
            $scope.photos.forEach(function(photo){
                photo.url = $scope.zoomSize < 5 ? photo.thumb_url : photo.medium_url;
            });
        };

        this.updatePhotos = updatePhotos;
    },
    link: function(scope, element, attrs, ctrl) {
        scope.$watch('thumbWidth', function() {   
            ctrl.updatePhotos();
        });
        ctrl.updatePhotos();
    }
}
});

(full fiddle here)

Notice that I've put the central updating logic into the controller rather than the link function. That's not strictly necessary here, but it could be useful in the future, because that controller object would be visible to the child galPhoto directives. (See the two "NOTE" comments in the fiddle.)

Holy cow that is smooth compared to the other versions. (Beyers and my original). — Kris Erickson, Feb 21 '14 at 21:08
Heh, thanks. It's worth noting, though, that since each instance of the galPhoto directive references its 'photo' object via the {{}} interpolation, the number of watches in this solution is still basically proportional to the number of photos... they're just under the hood instead of in your code. — anandthakker, Feb 21 '14 at 22:29

Angular Directives watching external models

2 Answers2