Question

我正在尝试为图片实施调整大小，因此我不会请求大图片文件。因此，我需要更改＆＃39; src＆＃39; img标签将其重定向到调整大小服务。

我一直在尝试制作一个指令来指定我想要使用的大小，并且$观察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);
            }
        }
    }
})

这不起作用，因为此指令与angular ngSrc指令之间存在冲突，在我的custom指令中修改src属性后再次修改它。我想知道是否有一个解决方法来修改＆＃39; src＆＃39;在它被ngSrc插值之后。

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

Answer 1

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

通过这种方式，您可以确保在ngSrc之后应用您的指令：

优先

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

更改src img指令或过滤角度

1 个答案: