CODEWITHSUNDEEP
javascriptdojoangularjs
mcgraphix
mcgraphix

Reputation: 202

Angular JS/Dojo widget parsing

I have an Angular JS application, in which I would like (actually I MUST) use dojo widgets. In the HTML template for the controller, I can return HTML that has dojo markup in it. However, the dojo parsing doesn't happen automatically when a view gets re-rendered. The only way I have been able to trigger reparsing is by manually calling the parser after a slight delay by doing something like this in the controller and then calling it when I know the model has changed.

refreshDojo = function() {
    setTimeout(function() {
        require(["dojo/parser"], function(parser) {
                parser.parse()
                });
        }, 10);
}

This isn't really feasible for two reasons:

  1. Having to do anything after a timeout is bound to cause trouble by either happening to quickly before the html has been processed or two slowly, causing a flash of content before the widgets are created.
  2. Secondly, if I am not mistaken, parser.parse() parses the whole DOM which is not very efficient if I only updated a single div.

Is there a way to know for certain when the DOM has stabilized so that I can be sure to trigger this at the right time? And is there a way to access the root element of the controller (It appears that you can no longer inject $element)?

Upvotes: 2

Views: 2234

Answers (2)

Benjamin
Benjamin

Reputation: 1173

You could create an attribute directive dojoType that requires the named widget module (and mixins if needed) and instantiates them instead of the dojo parser.

For example, if you've loaded a part of the DOM ('ajax'), then you would first create a new scope for it, compile and link it against the scope (the dojoType directive gets applied), then you would call the dojo parser and specify the rootNode.

dojoParser.parse({
    rootNode: dom.byId(domid)
}).then(/* access the widgets or whatever */);

Upvotes: 0

Andrew Joslin
Andrew Joslin

Reputation: 43023

You should decorate the $compile service, so before angular compiles anything it will let dojo compile it.

Here's a small example: http://plnkr.co/edit/9iJJFLWDqGtyqLV5Mbe3?p=preview

Documentation on decorators: http://docs.angularjs.org/api/AUTO.$provide#decorator

Upvotes: 3

Related Questions