Question

我有一个事件对象，其数据来自json，此事件包含一系列视频，我试图在YouTube嵌入时显示这些视频。我正在尝试使用指令来完成此操作，但它不能在我为视频做的ng-repeat中工作。这是指令的代码：

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

当我尝试像这样使用它时，它不起作用，如果我使用大括号就不解析变量，如果不使用大括号它就不起作用：

<div ng-repeat="video in event.videos" class="embed">
   <div youtube code="{{video}}"></div>
</div>

{{video}}元素具有YouTube视频的ID，如果我在没有指令的情况下执行此ng-repeat，则视频ID打印正常，因此在指令中使用时它正在工作但不解析它。 / p>

感谢任何帮助，提前谢谢！

Answer 1

在模板中试用ng-src

app.directive('youtube', function($sce) { return { restrict: 'EA', scope: { code:'=' }, replace: true, template: '', link: function (scope) { scope.$watch('code', function (newVal, oldVal) { // use newVal and oldVal console.log(newVal); // log it to see that it is passed if (newVal !== undefined) { scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal); } }); } }; });

另外，在您的HTML中，您不需要围绕视频{{}}，它已经是范围内的变量

<div ng-repeat="video in event.videos" class="embed">
   <div youtube code="video"></div>
</div>

在ng-repeat中，如何将元素的值传递给指令？

1 个答案: