创建YouTube AngularJS指令

一尘不染

创建YouTube AngularJS指令

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>，出现以下错误：

错误：[$ interpolate：noconcat]插值时出错：http :
//www.youtube.com/embed/
{{code}}严格的上下文转义不允许在需要可信值时连接多个表达式的插值。参见 http://docs.angularjs.org/api/ng。$
sce

我无法确定{{code}}表达式中的指令出了什么问题。

阅读 215

2020-07-04

共1个答案

一尘不染

具有角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及相关问题

2020-07-04