更改 src img 指令或过滤器 angular

Question

我正在尝试调整图像大小，因此我不请求大图像文件。因此，我需要更改 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);
            }
        }
    }
})

这不起作用，因为此指令与 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.

更改 src img 指令或过滤器 angular

Change src img directive or filter angular

javascript

angularjs

angularjs-directive

angularjs-filter