Директива AngularJS - Ошибка при интерполяции

Question

Я обнаружил директивы AngularJS и столкнулся с проблемой привязки атрибутов объекта к шаблону.

У меня есть список элементов с различным типом содержимого (jpg, mp4), и я пытаюсь настроить DOM, переключаясь между тегом img и тегом video относительно типа содержимого.

У меня есть контроллер с использованием фабрики в качестве зависимости для получения выбранного объекта из предыдущего представления:

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

Тогда у меня есть директива:

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);
    }
  }
}]);

В моем console.log(scope.event) браузер печатает объект со всеми его атрибутами (_id, contentType, filename и т. Д.).

И мое представление HTML, где я хотел бы обновить свой тег в соответствии с типом контента:

<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 />

Но у меня есть сообщение об ошибке:

Ошибка: [$interpolate:noconcat] Ошибка при интерполяции: http://192.168.1.11:8100/api/events/video/{{event._id}} Строгое контекстное исключение запрещает интерполяции, которые объединяют несколько выражений, когда требуется доверенное значение,

Я уже пытался добавить область атрибута к возвращаемому объекту директивы, но затем у меня есть неопределенный объект...

Спасибо за помощь!

РЕДАКТИРОВАТЬ:

В Интернете я обнаружил, что проблема связана с URL-адресами видео (это защита от XSS-атак), но я не знаю, как мне настроить этот раздел моей DOM и избежать любых проблем с безопасностью.

Answer 1

Вы можете использовать сервис $sce для возврата доверенного ресурса.

В src укажите функцию из вашей области, которая будет возвращать URL-адрес доверенного ресурса.

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

документация: https://docs.angularjs.org/api/ng/service/$sce