Trying to integrate a FireBreath plugin object into an AngularJS view is causing an error when attempting to render the view:
TypeError: Cannot read property 'nodeName' of undefined
The object can be successfully included in the view using $compile as follows:
$("body").append($compile('<object id="plugin" type="application/x-firebreathplugin" width="0" height="0></object>')($scope));
However, after including the object this way, triggering an event in the JavaScript code becomes problematic.
For instance:
plugin = document.getElementById('plugin');
console.log(plugin);
Results in a
TypeError
Error in the Chrome console. But calling:
plugin.callFunction();
Executes a FireBreath method. The challenge arises when attempting to trigger an event in the JS without success. Therefore, the following code never executes:
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();
Is there an issue with accessing the object after invoking $compile? Notably, logging the plugin in regular HTML (pre-AngularJS use) returns:
<JSAPI-Auto Javascript Object>
Suggesting that what is obtained from document.getElementById post-$compile may not be the same.
It would be more convenient if the <object> tag could be directly placed in the view.html file to display within <body class='ng-view'>. However, the initial TypeError prevents this. Suggestions for resolving this issue are highly welcome.
Any assistance is valued. Thank you.