Recently, I've been working with AngularJS directives and encountered an issue while trying to use an expression in the src attribute of an iframe. The error message I received referenced a URL that didn't provide much insight:
http://errors.angularjs.org/1.3.14/$interpolate/noconcat?p0=https%3A%2F%2Fwww.youtube.com%2Fembed%2F%7B%7BvideoId%7D%7D
I'm not sure what this error means or how to resolve it. Can anyone shed some light on this?
Below are the relevant JavaScript and HTML code snippets:
angular.module("myModule", [])
.directive("myDirective", function() {
return {
restrict: "EA",
scope: {
videoId: "@videoId",
width: "@width",
height: "@height"
},
template: '<iframe width="432" height="243" src="{{srcUrl}}" frameborder="0" allowfullscreen></iframe>',
replace: true,
controller: function($scope, $sce) {
$scope.srcUrl = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + $scope.videoId);
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.min.js"></script>
<my-directive video-id="8aGhZQkoFbQ" width="432" height="243"></my-directive>Any help on understanding and resolving this issue would be greatly appreciated.