유튜브 AngularJS와 지침

Question

을 만들어 YouTube 동영상을 삽입하려면 다음 AngularJS와 지침을 만들어 :

내 템플릿 <youtube code="r1TK_crUbBY"></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>' 
    }; 
}); 

, 나는 다음과 같은 오류 얻을 :

Error: [$interpolate:noconcat] Error while interpolating: http://www.youtube.com/embed/ {{code}} Strict Contextual Escaping disallows interpolations that concatenate multiple expressions when a trusted value is required. See http://docs.angularjs.org/api/ng .$sce

내가 할 수있는을 {{code}} 표현에서 지시어에 무엇이 잘못된 것인지 식별하지 못합니다.

Answer 1

각도가 1.2 인 경우 $sce service 및 trustAsResourceURL의 src을 iframe으로 삽입해야합니다.

데모 :

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

http://plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview

또한 참조 : Migrate from 1.0 to 1.2 및 related question을.