CoffeeScript - Referencing DOM nodes in Angular expressions is disallowed

Question

My main question is simple :

I get errors when doing DOM manipulation within Controllers or Directives however, the functionality works perfectly.

Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: open()

I would like to ignore these errors, and get the confirmation that it is safe to do so, from a functionality perspective ( not a design perspective )

To keep things simple, I would appreciate a simple answer to this question without questioning my need to do this.

---

Now, if anybody does want to discuss in more detail, I have this gist : https://gist.github.com/kosz/04f916a5725d85045be5 ( dependencies: angular, jquery, jquery ui dialog ) with the code i'm currently experiencing this behaviour in.

I have done my best so far, to get rid of this error, and based on what i read, and the docs, dom manipulation in angular seems to be encouraged in the directives.

So I've made the code work with a directive, however, it still throws the error !?

As you can see I am using Jquery UI and showing it for each list item, if the user wants to edit. I am not directly manipulating the dom, however, i need a way to control the close/open events of the jQuery ui Dialog, which doesn't make Angular fill my console with errors.

Any insight on this is greatly appreciated.

Please note that I am aware of the angular ui bootstrap modal, and it's not an option for me to use in this particular scenario.

Answer 1

As the error states, Angular disallows accessing DOM nodes in expressions.

CoffeeScript uses an implicit return if none is specified.

This means that for example the scope.open function in your code will:

return element.dialog('open');

Angular will detect this and throw the error.

If you add an explicit return it should solve the issue:

scope.open = =>
  element.dialog('open') 
  return true