javascript - Angular 指令 : rescale images, 在 ngSrc 更改时更新

Question

我有一个 Angular 指令，它当前在加载事件被触发时执行它的工作:

.directive("testDir", [
    function() {
        return {
            link: function(scope, elm, attrs) {
                    ...
                return elm.one("load", function() {
                    return ...
                });
            }
        };
    }
]);

这个指令被添加到 <img>标签，来源于ng-src .该指令旨在缩小图像尺寸，以在移动设备上实现更好的性能。

现在我的问题是:我希望指令函数被触发而不是 .one()时间，但每次之后 {{}} 的链接变量(通过 ng-src )确实改变。我怎样才能意识到这一点？

我希望指令尽可能独立，所以我希望它没有底层 Controller 的显式变量名。

Answer 1

JavaScript:

.directive(
  "testDir", [
    function() {
      return {
        scope: {
          imgSrc: '='
        },

        link: function(scope, elm, attrs) {
          scope.$watch(
            'imgSrc', function(newVal) {
              // here you can update whatever you want
            }
          );
        }
      };
    }
  ]
);

HTML:

<img ng-src="{{scopeModel}}" test-dir img-src="scopeModel"/>