$sce 的 Angular.js 问题阻止我将我想要的内容传递给我的指令

Question

我创建了一个指令，该指令将为 PNG 序列设置动画，当我在图像 url 中硬编码时，一切正常，但是当我尝试传递动态 url 时，我收到 $sce 不允许它的错误。

这是我的指令代码：

module.exports = function () {
    return {
        restrict : 'E',
        scope: {
            height: '@height',
            frames : '@frameCount',
            src : '@src',
            width : '@width'
        },
        link : function (scope, element) {
            var currentPosition = 0;
            var i = 1;
            var fps = 1000 / 30; // Setting this to 30 frames per second.
            element.css({
                backgroundImage : 'url(' + scope.src +')',
                height : scope.height + 'px',
                width : scope.width + 'px'
            });
            setInterval(function () {
                if(i < scope.frames) {
                    currentPosition = currentPosition + (parseInt(scope.height));
                    element.css('background-position-y', '-' + (currentPosition) + 'px');
                    i++;
                }
            }, fps);
        }
    }

在我看来，接下来我添加指令：

<png-sequencer src='assets/images/png-sequences/{{user.segment}}_{{user.condition}}.png' frame-count='12' height='37' width='64'></png-sequencer>

但是我得到以下错误：

angular.js:13236 错误：[$interpolate:noconcat] 插值时出错：assets/images/png-sequences/{{user.segment}}_{{user.condition}}.png 严格的上下文转义不允许在需要可信值时连接多个表达式的插值。

如果我将 src 替换为硬编码值，例如“assets/images/png-sequences/day_rainy.png”，那么一切正常。我需要做什么才能允许动态 src？

Answer 1

问题是 src 是保留字，将其更改为 pngSrc 解决了问题。