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.

Erro         


        

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

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

Answer 3

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...
};