Question

我创建了一个指令，用于添加YouTube视频，标题和说明

标题和说明工作正常，但我无法播放视频。

未找到无法插值：{{video}}错误：[$ sce：insecurl]阻止从$ sceDelegate策略允许的url加载资源。网址：https://www.youtube.com/embed/oHg5SJYRHA0

我尝试使用

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

但仍然没有运气

我有吸引人的例子

http://plnkr.co/edit/EVGnYYdVR5Q5BWEsQVrl?p=preview

有什么想法吗？

谢谢

Answer 1

在@上使用video绑定的隔离范围会覆盖链接函数中video属性的设置。链接仅在应用绑定之前执行一次。您可以使用$observe设置受信任的网址值，即使值已更改（plnkr）也可以使用：

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

Answer 2

您可以使用以下过滤器：

Plunker

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

iframe中youtube视频的angularjs指令

2 个答案: