角指令通过＆LT显示Flash;对象＆gt;标签会导致Flash试图加载{{EX pression}} [英] Angular directive to display Flash via <object> tag causes Flash to attempt to load {{expression}}

问题描述

我有一个AngularJS指令：

I have an AngularJS directive:

myApp.directive('movie', function(){
return {
    restrict: 'E',
    replace: true,
    scope: { product:'=', codebase: '@' },
    template: '<object style="width:550px;height:320px;" name="movie" id="movie" codebase="{{codebase}}"' +
              ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" tabindex="-1">' +
              '<param value="{{product.flashURL}}" name="movie">' +
              '<param value="true" name="play">' +
              '<param value="true" name="menu">' +
              '<param value="transparent" name="wmode">' +
              '<param value="noscale" name="scale">' +
              '<embed wmode="transparent" style="width:550px;height:320px;" src="{{product.flashURL}}" scale="noscale"' +
              ' pluginspage="http://www.macromedia.com/go/getflashplayer" play="true" name="movieEmbed" menu="true" id="movieEmbed">' +
              '</object>'
};});

它用于这样的：

<movie product="productInScope" codebase="http://flashcodebase..." />

我做了这个指令来解决，我简单的包含该HTML视图中，这是本所遇到的问题：对象标记呈现的瞬间，闪光灯将尝试在URL{{产品加载了影片。 flashURL}}。这显然​​失败，并通过时间获得角周围插了前pression，为时已晚。

I made this directive to fix the problem I was having by simply including this HTML in a view, which is this: the instant the object tag is rendered, the Flash attempts to load a movie at the URL "{{product.flashURL}}". That obviously fails, and by the time Angular gets around to interpolating the expression, it's too late.

不幸的是，重组它作为一个指令没有帮助的问题。有趣的是，{{codeBase的}}前pression似乎总是工作;也许是第一次评估，导致闪存加载并尝试获取URL？

Unfortunately, restructuring it as a directive didn't help the problem. Interestingly, the {{codebase}} expression seems to always work; maybe it evaluates first, causing the Flash to load and attempt to fetch the URL?

你会如何改写这个指令（或者使用一些简单的方法），这样不会创建对象标记，直到flashURL可用？

How would you rewrite this directive (or use some simpler approach) so that the object tag is not created until the flashURL is available?

推荐答案

我碰到了类似的问题，试图通过嵌入指令中的PDF。的问题是，当所述模板被放置到DOM绑定尚未插，如@mfelix设。然而，它是棘手的，因为对象调用code中的浏览器之外，因此不能保证与无效或动态属性（取决于我猜想插件）发挥出色。

I ran into a similar issue trying to embed a PDF via directive. The problem is that when the template is placed into the DOM the bindings have not yet been interpolated, as @mfelix supposes. However it is trickier because object invokes code outside the browser so it isn't guaranteed to play well with invalid or dynamic attributes (depends on the plugin I suppose).

我结束了无需编写链接函数，它 $遵守的变量，就像在 NG-SRC / NG-HREF 解决方案。在 NG-SRC 或 NG-HREF 的 $观察有关变量的回调只是设置相应的属性和一切工作，因为HTML5（或我们习惯叫它，DHTML）是酷这样。例如，您可能有一个＆LT; A＆GT; 没有相应的 href标记。浏览器处理这个就好了。而当你的第一个角后消化设置的href 就可以了，浏览器可以处理它。但对于＆LT;对象＆gt; 标签，它不工作这么好，因为即使插件配置错误（比如缺少src属性），浏览器也没办法的知道，它仍然会调用相应的插件，它会以高度特异的方式处理缺少的信息。就我而言，火狐处理它优雅和Chrome barfed。

I wound up having to write a link function, which $observes the variable, just as in the ng-src/ng-href solution. In the case of ng-src or ng-href, the $observe callback on the variable simply sets the corresponding attribute and everything works because HTML5 (or as we used to call it, DHTML) is cool like that. For example, you might have an <a> tag without a corresponding href. The browser handles this just fine. And when you set an href on it after the first Angular digest, the browser can deal with it. But for the <object> tag, it doesn't work so well, because even if the plugin is misconfigured (say, missing src attribute), the browser has no way of knowing that and it will still invoke the corresponding plugin, which will treat missing information in a highly idiosyncratic way. In my case, Firefox handled it gracefully and Chrome barfed.

所以接下来的方法我试过是使用 $观察回调注入包含完全指定的对象的子元素标签（使用+运算符串联变量到模板字符串）。

So the next approach I tried was to use the $observing callback to inject a child element containing the fully specified object tag (concatenating the variable into the template string using the + operator).

简化的例子指令定义：

scope: ...
link: function(scope, element, attrs) {
        attrs.$observe('src', function(value) {
          if (value) {
            element.html(
              '<object width="100%" type="application/pdf" data="'+value+'">');
          } else {
            element.html("<div></div>"); // We have to put something into the DOM
          }
        });
      },
 etc: ...

在的src 终于有了一个值，其值更改时，您通过$观察注册将调用回调。

When src finally has a value, and when its value changes, the callback you register via $observe will be invoked.

我的第三个解决方案，这是我最喜欢的，是PDF文件加工成GIF和显示这些图像，完成放弃诅咒的插件（不，PDF.js没有削减它）。因此，也许你可以把你的Flash动画成动画.gif文件。这将是真棒。

My third solution, which I like best, was to process the PDFs into GIFs and display them as images, completing forgoing accursed plugins (and no, PDF.js wasn't cutting it). So maybe you can turn your Flash movies into animated .gifs. That would be awesome.

这篇关于角指令通过＆LT显示Flash;对象＆gt;标签会导致Flash试图加载{{EX pression}}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！