title: AngularJS Directive - Error while interpolating
body: <p>I am discovering the AngularJS directives and I am facing a problem for binding attributes of an object to a template.</p>
  
  <p>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.</p>
  
  <p>I have a controller with using a factory as dependency for getting the selected object from the previous view:</p>
  
  <pre><code>app.controller('EventDetailCtrl', function($scope, Events) {
     $scope.event = Events.getCurrentEvent();
  }
  </code></pre>
  
  <p>Then, I have my directive:</p>
  
  <pre><code>angular.module('starter.directives', [])
  .directive('myEventDirective', ['$compile', 'API_ENDPOINT', function($compile, API_ENDPOINT){
    var imgTemplate = '&lt;img ng-src="' + API_ENDPOINT.url + '/events/image/{{event._id}}" /&gt;';
  
    var videoTemplate = '&lt;video controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline" class="videoPlayer"&gt;' + 
      '&lt;source src="' + API_ENDPOINT.url + '/events/video/{{event._id}}" type="video/mp4"/&gt; &lt;/video&gt;';
  
    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);
      }
    }
  }]);
  </code></pre>
  
  <p>On my console.log(scope.event), the browser is printing the object with all its attributes (_id, contentType, filename, etc..).</p>
  
  <p>And my HTML view where I would like to update my tag regarding to the content type:</p>
  
  <pre><code>&lt;ion-view view-title="{{event.name}}"&gt;
    &lt;ion-content class="padding"&gt;
     &lt;my-event-directive data-source="event"&gt;&lt;/my-event-directive&gt;
     &lt;ion-item&gt;
       Information about event do write
     &lt;/ion-item&gt;
  &lt;ion-view /&gt;
  </code></pre>
  
  <p>But I have the error message: </p>
  
  <p>Error: [$interpolate:noconcat] Error while interpolating: <a href="http://192.168.1.11:8100/api/events/video/" rel="nofollow noreferrer">http://192.168.1.11:8100/api/events/video/</a>{{event._id}}
  Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required.</p>
  
  <p>I already tried to add the attribute scope to the return object of the directive but then I have an undefined object...</p>
  
  <p>Thank you for your help!</p>
  
  <p>EDIT:</p>
  
  <p>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..</p>