更改 src img 指令或过滤角度答案

【问题标题】：Change src img directive or filter angular更改 src img 指令或过滤角度
【发布时间】：2015-02-25 10:02:08
【问题描述】：

我正在尝试调整图像大小，因此我不需要大图像文件。因此，我需要更改 img 标签的 'src' 以将其重定向到调整大小服务。

我一直在尝试制定一个指令，指定我想要使用的大小并 $observe ngSrc。

.directive('resizeTo', function ( imageResizeFactory ) {
    return {
        restrict: 'A',
        link: function (scope, el, attrs) {

            var sizes = attrs.resizeTo.split('x')

            if ( !sizes.length ) {
                throw new ReferenceError('no sizes provided');
            }

            if ( el[0].nodeName !== 'IMG' ) {
                throw new ReferenceError('type of node must be IMG');
            }

            //
            // apply same width and height
            if ( sizes.length === 1 ) {
                sizes.push.apply(sizes, sizes);
            }

            var observer = attrs.$observe('ngSrc', function ( newSrc ) {
                _updateSrc( newSrc );
            });

            function _updateSrc( src ) {
                var resizeUrl = imageResizeFactory( src, sizes[0], sizes[1] )
                el.attr('src', resizeUrl);
            }
        }
    }
})

这不起作用，因为该指令和角度 ngSrc 指令之间存在冲突，在我的自定义指令中修改了 src 属性后再次修改它。我想知道在 ngSrc 插值后是否有修改“src”的解决方法。

我也在考虑使用过滤器。你怎么看待这件事？我想就这个问题得到一些反馈。

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-filter

【解决方案1】：

为了确定优先级，您可以使用指令的 priority 配置参数。

这样你就可以确定你的指令是在 ngSrc 之后应用的：

优先级

当在单个 DOM 元素上定义了多个指令时，有时需要指定指令的顺序被应用。优先级用于在指令之前对指令进行排序编译函数被调用。优先级被定义为一个数字。首先编译具有更高数值优先级的指令。预链接功能也按优先级顺序运行，但后链接函数以相反的顺序运行。指令的顺序与相同的优先级未定义。默认优先级为 0。

【讨论】：