不工作的动态数据“对象”标签嵌入 [英] Embedding with 'object' tag not working on dynamic data
问题描述
我试图用嵌入对象标记，而不是内部框架YouTube的videoes。然而，它不即使element.url指向正确的URL工作。如果我更换{{element.url}}（对象标签）只用URL，它工作得很好。 iframe的工作，因为它是。
I am trying to embed youtube videoes using the object tag instead of iframes. However, it doesn't work even though element.url points to the correct url. If I replace {{element.url}} (in object tag) with just the url, it works just fine. The iframe works as it is.
<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>
为什么在IFRAME {{element.url}}的工作，但不反对的标签？
Why does {{element.url}} work in iframe, but not object tag?
推荐答案
该问题已在许多SO问题和答案描述。总之，据我理解正确的话，那是因为你的执行远程＆LT;对象＆gt; 。在这种情况下，所有＆LT;对象＆gt; 看源，其实只是文字 {{element.url}} 。
The problem has been described in many SO questions and answers. In short, as far as I understood correctly, it's because you "execute" remote <object>. In this case all <object> see as source, is really just literal {{ element.url }}.
您可以去解决这个通过创建自己的的Youtube指令。例如：
You can go around this by creating your own Youtube directive. For example:
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模板用法是一样简单
Usage in HTML template would be as simple as
<body ng-controller="MyCtrl">
<youtube movie="{{ movie.url }}"></youtube>
</body>
和控制器中，你有你的电影
And in controller, you have your movie
$scope.movie = {
name: 'movie',
url: '//www.youtube.com/v/YrrzgE8J1KI'
};
例Plunker这里 http://plnkr.co/edit/RJyewh ，你可以继续提高通过添加新的属性（宽度等），当你看到合适的。
Example Plunker here http://plnkr.co/edit/RJyewh which you can continue to improve by adding new attributes (width and so on) as you see appropriate.
当然，你可以换任何其他＆LT;对象＆gt; 的指令，太
Of course you could wrap any other <object> in directive, too.
这篇关于不工作的动态数据“对象”标签嵌入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
