javascript - 观察外部模型的 Angular Directive(指令)

Question

在学习 Angular 时，我正在创建一个可以缩放的简单画廊。我最初的实现使用了一个简单的 ng-repeat，但我很快发现，基于画廊的缩放，我想要更改 url 源(从小拇指到中拇指)，可能还有标题上的 css 等。

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

所以，我改用了一个更简洁的指令:

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

但我能让指令元素响应缩放更改的唯一方法是在元素链接内的缩放中添加一个 watch :

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;');
    });
}

我知道你不应该滥用 watch ，我担心的是，画廊中有 500 个元素，你正在做 500 个 watch 。但是我找不到关于在重复指令中响应外部输入的指导。这两个画廊的表现似乎差不多，但我想知道我是否做错了？这是 original gallery 的 fiddle 和 directive version 的 fiddle .

Answer 1

您的用例很适合 $scope 事件。在你的 Controller 中放一 block watch :

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

然后在你的指令中为这个事件注册监听器:

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 事件监听器仅在其事件被触发时被调用，因此这应该限制监视列表并优化性能。

这是一个 updated fiddle基于您使用事件方法的示例:http://jsfiddle.net/dv7fy/1/

作为旁注，Angular watches 的性能比大多数人想象的要好，看看这个例子(仍然在 Angular 1.0.3 上，在最新版本上应该更好):http://jsfiddle.net/mhevery/cXMPJ/11/