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

Answer 2

Although the accepted answer is right I'd like to share my experience anyway as it turned out to be a different problem. In fact I had the same issue but I wasn't actually returning anything at all from my function (and not using CoffeeScript) so i was puzzled for a bit and struggled to find a solution.

In my case the problem appeared to be that I was passing the DOM node as an argument to the function like so:

<span ng-mouseenter="doSomething($event.currentTarget)"></span>

What proved to be a solution here was changing the mentioned code to pass only the event and not the node directly:

<span ng-mouseenter="doSomething($event)"></span>

Then fetch the node in the controller/directive/whatever like so:

doSomething = function(evt){
    var elem = evt.currentTarget;
    // do something with this element...
};

Answer 3

Occurs when an expression attempts to access a DOM node.

AngularJS restricts access to DOM nodes from within expressions since it's a known way to execute arbitrary Javascript code.

This check is only performed on object index and function calls in Angular expressions. These are places that are harder for the developer to guard. Dotted member access (such as a.b.c) does not perform this check - it's up to the developer to not expose such sensitive and powerful objects directly on the scope chain.

To resolve this error, avoid access to DOM nodes.

The $parse:isecdom error also occurs when an event handler invokes a function that returns a DOM node.

<button ng-click="iWillReturnDOM()">click me</button>

js:

$scope.iWillReturnDOM = function() {
  return someDomNode;
}

To fix this issue, avoid returning DOM nodes from event handlers.

Note: This error often means that you are accessing DOM from your controllers, which is usually a sign of poor coding style that violates separation of concerns.

Implicit Returns in CoffeeScript

This error can occur more frequently when using CoffeeScript, which has a feature called implicit returns. This language feature returns the last dereferenced object in the function when the function has no explicit return statement.

The solution in this scenario is to add an explicit return statement. For example return false to the function.

Error: $parse:isecdom Referencing a DOM node in Expression