Angular directive to display Flash via <object> tag causes Flash to attempt to load {{expression}}

Question

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

It is used like this:

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

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.

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?

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

Answer 1

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).

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).

Simplified example directive definition:

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: ...

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

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.