iframe中youtube视频的angularjs指令

我创建了一个指令来添加youtube视频、标题和描述

标题和描述工作很好，但我不能工作的视频

找不到无法插入：{{video}}错误：[$sce:InsteUrl]阻止从url加载资源$SCEDegate策略不允许。网址：

我试着用

scope.video  = $sce.trustAsResourceUrl(attrs.video);

但还是没有运气

我举了一个普朗克的例子

有什么想法吗

---

谢谢

在

视频

上使用带

@

绑定的隔离作用域将覆盖链接函数中

视频

属性的设置。链接在应用绑定之前只执行一次。您可以使用

$observe

设置受信任的url值，即使该值发生更改（），该设置也会起作用：

app.directive（'youtubeHelp'，函数（$sce）{
返回{
限制：“AE”，
作用域：{header:'@'}，
是的，
替换：正确，
模板：“{{header}}{{video}}…”，
链接：函数（范围、元素、属性）{
scope.header=attrs.header；
属性$observe（'video'，函数（值）{
scope.video=$sce.trustAsResourceUrl（值）；
})
}
};
});

在

视频

上使用带

@

绑定的隔离作用域将覆盖链接函数中

视频

属性的设置。链接在应用绑定之前只执行一次。您可以使用

$observe

设置受信任的url值，即使该值发生更改（），该设置也会起作用：

app.directive（'youtubeHelp'，函数（$sce）{
返回{
限制：“AE”，
作用域：{header:'@'}，
是的，
替换：正确，
模板：“{{header}}{{video}}…”，
链接：函数（范围、元素、属性）{
scope.header=attrs.header；
属性$observe（'video'，函数（值）{
scope.video=$sce.trustAsResourceUrl（值）；
})
}
};
});

您可以使用如下过滤器：

app.filter（'trustUrl'，函数（$sce）{
返回函数（url）{
返回$sce.trustAsResourceUrl（url）；
};
});
应用程序指令（'youtubeHelp'，函数（）{
返回{
限制：“AE”，
范围：{
标题：“@”，
视频：“@”
},
是的，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
scope.header=attrs.header；
}
};
});

您可以使用如下过滤器：

app.filter（'trustUrl'，函数（$sce）{
返回函数（url）{
返回$sce.trustAsResourceUrl（url）；
};
});
应用程序指令（'youtubeHelp'，函数（）{
返回{
限制：“AE”，
范围：{
标题：“@”，
视频：“@”
},
是的，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
scope.header=attrs.header；
}
};
});

app.directive('youtubeHelp', function($sce) {
  return {
    restrict: 'AE',
    scope: { header:'@' },
    transclude: true,
    replace: true,
    template: '<div class="well"><h2>{{header}}{{video}}...</h2></div>',
    link: function (scope, element, attrs) {
        scope.header = attrs.header;
        attrs.$observe('video', function(value) {
          scope.video = $sce.trustAsResourceUrl(value);
        })
    }
  };
});

app.filter('trustUrl', function($sce) {
  return function(url) {
    return $sce.trustAsResourceUrl(url);
  };
});

app.directive('youtubeHelp', function() {
  return {
    restrict: 'AE',
    scope: {
      header: '@',
      video: '@'
    },
    transclude: true,
    replace: true,
    template: '<div class="well"><iframe ng-src="{{video | trustUrl}}"></iframe></div>',
    link: function(scope, element, attrs) {
      scope.header = attrs.header;
    }
  };
});