1

我正在尝试使用对象标签而不是 iframe 嵌入 youtube 视频。但是，即使 element.url 指向正确的 url，它也不起作用。如果我只用 url 替换 {{element.url}} （在对象标记中），它就可以正常工作。iframe 按原样工作。

<div ng-show="element.url" id="resourceFrame">      
  <iframe class="iframe" width="500" height="325"  src="{{element.url}}" frameborder="0" allowfullscreen></iframe>
  <object width="500" height="325" >
    <param
      name="{{element.name}}"
      value="{{element.url}}">
    </param>
    <param
      name="allowscriptaccess"
      value="always">
    </param>
    <param
      name="allowFullScreen"
      value="true">
    </param>
    <embed
      src="{{element.url}}"
      type="application/x-shockwave-flash"
      allowscriptaccess="always"
      allowfullscreen="true"
      width="500"
      height="325">
    </embed>
  </object> 
  <div id="text-content" ng-show="element.text">
    <p>{{element.text}}</p>
  </div>
</div>

为什么 {{element.url}} 在 iframe 中有效，但在对象标签中无效？

4

1 回答 1

2

该问题已在许多 SO 问题和答案中进行了描述。简而言之，据我正确理解，这是因为您“执行”了 remote <object>。在这种情况下，所有人都<object>视为来源，实际上只是字面意思 {{ element.url }}。

您可以通过创建自己的Youtube directive. 例如：

app.directive('youtube', function() {
    return {
        restrict: 'E',
        scope: {
          movie: '@'
        },
        link: function(scope, element) {
            var object = '<object width="560" height="315">' +
              '<param name="movie" value="' + scope.movie + '" />' +
              '<embed ' +
              '  src="' + scope.movie + '" ' +
              '  type="application/x-shockwave-flash" ' +
              '  width="560" ' +
              '  height="315" />' +
            '</object>';
            element.replaceWith(object);
        }
    };
});

HTML模板中的用法很简单

<body ng-controller="MyCtrl">
    <youtube movie="{{ movie.url }}"></youtube>
</body>

在控制器中，你有你的电影

$scope.movie = { 
    name: 'movie',
    url: '//www.youtube.com/v/YrrzgE8J1KI'
};

此处为 Plunker 示例http://plnkr.co/edit/RJyewh，您可以根据需要添加新属性（宽度等）来继续改进它。

当然，您也可以<object>在指令中包装任何其他内容。

于 2014-08-09T16:16:48.997 回答