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. ```

``` So, I switched to a much cleaner directive: ``` ``` but the only way I could get the directive element to respond to the zoom change is to add a watch to…

Accepted Answer

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.)

Angular Directives watching external models

Solution

Problem

Related problems