I've successfully developed a directive that animates a PNG Sequence. Everything functions perfectly when I manually input the image url, but when attempting to pass a dynamic url, I encounter an error related to $sce disallowing it.
Below is the code for my directive:
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; // Set 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);
}
}
Next, in my view, I include the directive:
<png-sequencer src='assets/images/png-sequences/{{user.segment}}_{{user.condition}}.png' frame-count='12' height='37' width='64'></png-sequencer>
However, I receive the following error message:
angular.js:13236 Error: [$interpolate:noconcat] Error while interpolating: assets/images/png-sequences/{{user.segment}}_{{user.condition}}.png Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.
When I replace the dynamic src with hardcoded values like "assets/images/png-sequences/day_rainy.png," everything works flawlessly. What steps should I take to allow for dynamic src?