Referencing DOM nodes in Angular expressions is disallowed

[Martin Halamíček]

Some of my directives became broken after upgrade to Angular v1.2.0-rc.3

It is related to this commit https://github.com/angular/angular.js/commit/be0b4856699334ff51bacf2d1fd3394663d6bd28

There is example of broken directive https://github.com/keboola/angular-kb/blob/master/src/modules/ui/sapi-console-href/sapi-console-href.coffee#L31

Throws an error "[$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: submit()" on line 31.

Same issue here https://github.com/keboola/angular-kb/blob/6f4122344458d4fd8c11863ce9bcbd83e0fc66b3/src/modules/ui/inline-edit/inline-edit.coffee#L84 ,  error was triggered by calling "element.unbind('.inlineEdit')".

I found workaround using $timeout but it is quite hacky.

It is not longer supported to access DOM in directives? How i should handle it now?

thanks

Martin

[spint]

We are experiencing the same issue all over our application after upgrading from RC2 :s

Any thoughts on this ?

KR

Stijn

[Majid Burney]

They've only disallowed accessing DOM nodes in expressions, not in directives. Your code is only broken because of Coffeescript's bad habit of automatically returning the last value in a function's scope. Angular detects that the function has returned a DOM node and throws an exception to keep you safe. Add an explicit "return" to the end of each of those functions and they should work fine.

[spint]

Thanks man, that solved it for me, you saved my day :-) 

[Apoorv Parijat]

Saved my day!!

[Pierre Maoui]

Amazing to notice this. Thanks ! 

[Nik]

You saved the day for me,too

On Thursday, October 17, 2013 10:36:50 AM UTC+2, Majid Burney wrote:

[Giovanni K Bonetti]

Mine too!

[Xingyi Chen]

Mine too!!

[Arvid Kahl]

And mine!

[Ken Wang]

Thank you so much Majid!

[Eric Miller]

Nice! I had no idea why it was failing. Not sure I'd call auto returning a bad habit. In many cases it makes my code shorter and easier to read, especially with angular where I'm always returning functions or objects to the framework.

I put the onus on Angular for a clearer error message. I thought it was detecting the access of a dom node, since that's what the documentation said, not the return type of a function.

On Thursday, October 17, 2013 1:36:50 AM UTC-7, Majid Burney wrote:

[Roy Truelove]

My day was likewise saved by this answer