When does ng-attr-id turn into id? A compile timing question

[Eric Eslinger]

Hey list. I'm playing around with QuillJS, which is a pretty rad text editor. In order to initialize it, you have to give it an ID for the div it takes over. Given that it's possible to have more than one editor on a single page, I wanted to be clever about this. My editor div looks like:

<div ng-attr-id="{{view.editorId}}"></div>

And in my editor directive's link function, I put:

scope.view.editorId = "editor-#{doc.id}"

scope.view.quillEditor = new Quill "##{scope.view.editorId}"

What seems to happen is that when I call the Quill constructor, at that point the DOM probably contains the above DIV, but the ng-attr-id directive hasn't properly set its div's id to "editor-140" or whatever. Quill chokes.

If I do a $timeout on the quill initialization and wait a few hundred milliseconds, it works fine (further evidence that this is going on).

So, is there some kind of promise I can get a handle on for the current digest cycle? What I want to do is set a scope variable and then wait until the changes that scope update trigger have propagated, and then do something else.

That, or use the element parameter on the link function to better effect. I thought I might be able to do something like element.children().children()[1] or something (which also does work as an argument to the Quill constructor), but that feels *really* brittle. If I change the toolbar or something else, I break the directive.

e

[Eric Eslinger]

So, FWIW I managed to work around this by:

* using ng-attr-id="editor-{{doc.id}}" in my html template (and not relying on manually setting a scope variable with the entire id string).

* doing a scope.$watch 'doc.id', (newId) -> initQuill() if newId? in my link function.

The latter seems to fire the watch function after the DOM has updated to reflect the new value of doc.id, and the former means there's one less digest cycle between when the doc.id gets set and the ng-attr-id directive gets recompiled.

e

[Sander Elias]

Hi Eric,

I think you must take a look at $evalAsync, I suspect it may solve your issue.

Regards

Sander