javascript - 更改 src img 指令或过滤 Angular

Question

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

我一直在尝试制定一个指令来指定我想要使用的大小并$观察 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 指令之间存在冲突，在我的自定义指令中修改 src 属性后再次修改它。我想知道是否有解决方法可以在 ngSrc 插值后修改“src”。

我也在考虑使用过滤器。你怎么看待这件事？我想获得有关此问题的一些反馈。

Answer 1

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

这样您就可以确保您的指令在 ngSrc 之后应用:

priority

When there are multiple directives defined on a single DOM element, sometimes it is necessary to specify the order in which the directives are applied. The priority is used to sort the directives before their compile functions get called. Priority is defined as a number. Directives with greater numerical priority are compiled first. Pre-link functions are also run in priority order, but post-link functions are run in reverse order. The order of directives with the same priority is undefined. The default priority is 0.