CoffeeScript - 不允许在Angular表达式中引用DOM节点

Question

我的主要问题很简单:

在控制器或指令中进行DOM操作时出错,但功能完美.

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

我想忽略这些错误,并从功能角度(不是设计角度)确认这样做是安全的

为了简单起见,我很感激这个问题的一个简单答案,而不会质疑我是否需要这样做.

---

现在,如果有人想要更详细地讨论,我有这个要点:https: //gist.github.com/kosz/04f916a5725d85045be5(依赖关系:angular,jquery,jquery ui对话框),我正在遇到这个代码的行为.

到目前为止,我已经尽了最大的努力来摆脱这个错误,并根据我所阅读的内容和文档,在指令中鼓励使用角度的dom操作.

所以我已经使代码使用了一个指令,但是,它仍然会引发错误!

如您所见,我正在使用Jquery UI并为每个列表项显示它,如果用户想要编辑的话.我不是直接操作dom,但是,我需要一种方法来控制jQuery ui Dialog的关闭/打开事件,这不会使Angular填充我的控制台有错误.

我们非常感谢您对此的任何见解.

请注意,我知道角度ui bootstrap模式,并且我不能在这个特定场景中使用它.

Answer 1

正如错误所述,Angular不允许访问表达式中的DOM节点.

return如果没有指定,CoffeeScript使用隐式.

这意味着,例如scope.open代码中的函数将:

return element.dialog('open');

Angular会检测到这个并抛出错误.

如果你添加一个显式,return它应该解决问题:

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

Answer 2

虽然接受的答案是正确的,但我还是想分享我的经验,因为事实证明这是一个不同的问题.事实上我有同样的问题,但我实际上并没有从我的函数返回任何东西(而不是使用CoffeeScript),所以我有点困惑,并努力寻找解决方案.

在我的情况下,问题似乎是我将DOM节点作为参数传递给函数,如下所示:

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

事实证明这是一个解决方案是改变提到的代码只传递事件而不是直接传递节点:

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

然后获取控制器/指令中的节点/如下所示:

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