Firebreath Object in AngularJS

Question

Firebreath Object in AngularJS

I have tried to include a FireBreath plugin object in an AngularJS view, however when I try to render the view I get this error:

TypeError: Cannot read property 'nodeName' of undefined

I am able to successfully include the object in the view with $compile like this:

$("body").append($compile('<object id="plugin" type="application/x-firebreathplugin" width="0" height="0></object>')($scope));

However, after including the object like this I cannot get my plugin to fire an event in the JS.

Doing something like this:

plugin = document.getElementById('plugin');
console.log(plugin);

Returns

TypeError

In the Chrome console. But I can still do:

plugin.callFunction();

And have a FireBreath method execute. The issue is when I try to get an event to fire in the JS. No matter what I try, I cannot get the event to fire. So this code will never execute:

var addEvent = function(obj, name, func) {
    obj.addEventListener(name, func, false);
}

addEvent(document.getElementById('plugin'), 'firebreathEvent', function(data) {
    console.log('data ' + data);
});

var plugin = document.getElementById('plugin');
plugin.functionThatTriggersFireBreathEvent();

Does anybody know if it has something to do with accessing the object after calling $compile? I noticed that in regular HTML (before using AngularJS) logging the plugin in the console returns this :

<JSAPI-Auto Javascript Object>

So I am thinking that whatever I am getting with document.getElementById after using $compile is not the same.

What would be easier is is if I could just include the <object> tag in the view.html file and have it display in <body class='ng-view'> but I get the top TypeError, so if anyone has any ideas for that, that would be preferred.

Any help is appreciated. Thanks.

javascript
c++
angularjs
firebreath

Answer 1

If anyone is interested, because I could not get the event to fire, I followed along to this link:

http://colonelpanic.net/2010/12/firebreath-tips-asynchronous-javascript-calls/

(which I think is your blog @taxilian) to get the data back to the JS.

Plugin Code: Great example in the link.

JS Code:

//attach FireBreath Object to AngularJS View
$("body").append($compile('<object id="plugin" type="application/x-firebreathplugin" width="1" height="1"><param name="onload" value="pluginLoaded"/></object>')($scope));

var callback = function(data) {
    //data is an object
    console.log(data.resultFromFireBreath);
}

plugin = document.getElementById("plugin");
plugin.getData(callback);

This will have to work for now until someone can figure out how to attach an event to the plugin object after $compile.

Answer 2

I ran into the same problem and was able to make the problem go away by creating a read-only nodeName property in my plugin object. I asked about this in a firebreath forum post and taxilian suggested adding this to JSAPIAuto.cpp, which also worked, so I submitted a pull request with the change.

Answer 3

I once spent about 6 hours trying to make FireBreath plugins work with jquery; it was really educational, but ultimately I determined that it wasn't worth the work.

Long story short is that it's not worth it; particularly since even if you could make it work, it would break on IE9 where FireBreath doesn't support addEventListener (IE never gives it the even info, so it's a little hard to support) and you would need to use attachEvent anyway.