Создайте директиву YouTube AngularJS

Я создал следующую директиву AngularJS для встраивания видео youtube:

// A Simple youtube embed directive
.directive('youtube', function() {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="http://www.youtube.com/embed/{{code}}" frameborder="0" allowfullscreen></iframe>'
  };
});

Когда я вызываю его из моего шаблона <youtube code="r1TK_crUbBY"></youtube>, я получаю следующую ошибку:

Ошибка: [$ интерполяция: noconcat] Ошибка при интерполяции: http://www.youtube.com/embed/ {{code}} Строгое контекстное экранирование запрещает интерполяции, которые объединяют несколько выражений, когда требуется доверенное значение. См. http://docs.angularjs.org/api/ng. $Sce

Я не могу определить, что неправильно с директивой в выражении {{code}}.

Ответ 1

С Angular 1.2 вам нужно ввести $sce сервис и trustAsResourceURL src iframe.

Демо: http://plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview

.directive('youtube', function($sce) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('code', function (newVal) {
           if (newVal) {
               scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
           }
        });
    }
  };
});

Также см.: Миграция от 1.0 до 1.2 и связанный вопрос.