AngularJS Directive - Error while interpolating

Question

I am discovering the AngularJS directives and I am facing a problem for binding attributes of an object to a template.

I have a list of items of different content type (jpg, mp4) and I am trying to customize the DOM by switching between an img tag and a video tag regarding to the content type.

I have a controller with using a factory as dependency for getting the selected object from the previous view:

app.controller('EventDetailCtrl', function($scope, Events) {
   $scope.event = Events.getCurrentEvent();
}

Then, I have my directive:

angular.module('starter.directives', [])
.directive('myEventDirective', ['$compile', 'API_ENDPOINT', function($compile, API_ENDPOINT){
  var imgTemplate = '<img ng-src="' + API_ENDPOINT.url + '/events/image/{{event._id}}" />';

  var videoTemplate = '<video controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline" class="videoPlayer">' + 
    '<source src="' + API_ENDPOINT.url + '/events/video/{{event._id}}" type="video/mp4"/> </video>';

  var getTemplate = function(contentType){
    var template = '';
    if(contentType == 'mp4'){
       template = videoTemplate;
    } else { 
     template = imgTemplate; 
    }
    return template;
  };

  return {
    restrict: 'E',
    replace: true,
    link: function(scope, element, attrs){
      console.log(scope.event);
      element.html(getTemplate(scope.event.contentType));
      compile(element.contents())(scope);
    }
  }
}]);

On my console.log(scope.event), the browser is printing the object with all its attributes (_id, contentType, filename, etc..).

And my HTML view where I would like to update my tag regarding to the content type:

<ion-view view-title="{{event.name}}">
  <ion-content class="padding">
   <my-event-directive data-source="event"></my-event-directive>
   <ion-item>
     Information about event do write
   </ion-item>
<ion-view />

But I have the error message:

Error: [$interpolate:noconcat] Error while interpolating: http://192.168.1.11:8100/api/events/video/{{event._id}} Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.

I already tried to add the attribute scope to the return object of the directive but then I have an undefined object...

Thank you for your help!

EDIT:

I found over internet that the problem comes of video urls (it is a protection against XSS attacks) but I don't know how I can customize this section of my DOM and avoid any security lack..

score 1 · Accepted Answer · answered Mar 24 '17 at 16:34

1

You can use the $sce service to return a trusted resource.

In the src provide a function from your scope that will return a trusted resource URL.

$scope.getResourceURL() {
    return $sce.trustAs($sce.RESOURCE_URL, yourURLhere);
}

documentation: https://docs.angularjs.org/api/ng/service/$sce

answered Mar 24 '17 at 16:34

Joshua J Wilborn

526
3
13

Thank you! Just manage do deal with it. I replaced my attribute src from the source tag by ng-src={{resourceUrl}} and build my URL directly in my controller using $sce.trustAsResourceUrl(myURL); method. – Frédéric Lopes Mar 25 '17 at 16:07

AngularJS Directive - Error while interpolating

1 Answers1