CoffeeScript - ссылки на узлы DOM в выражениях Angular запрещены

Мой главный вопрос прост:

Я получаю ошибки при манипулировании DOM в контроллерах или директивах, однако функциональность работает отлично.

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

Я хотел бы проигнорировать эти ошибки и получить подтверждение, что это безопасно, с точки зрения функциональности (не с точки зрения дизайна)

Чтобы все было просто, я был бы признателен за простой ответ на этот вопрос, не подвергая сомнению мою потребность в этом.

Теперь, если кто-то хочет обсудить более подробно, у меня есть эта суть: https://gist.github.com/kosz/04f916a5725d85045be5 (зависимости: angular, jquery, jquery ui dialog) с кодом, в котором я сейчас испытываю такое поведение.

Я сделал все возможное до сих пор, чтобы избавиться от этой ошибки, и на основе того, что я читал, и документирование dom манипуляции в angular, по-видимому, поощряется в директивах.

Итак, я сделал код с директивой, однако он все равно выдает ошибку!?

Как вы можете видеть, я использую JQuery UI и показываю его для каждого элемента списка, если пользователь хочет редактировать. Я не напрямую манипулирую с dom, однако мне нужен способ управления закрытыми/открытыми событиями jQuery ui Dialog, который не делает angular заполнять мою консоль ошибками.

Любое понимание этого очень ценится.

Обратите внимание, что я знаю об angular ui bootstrap modal, и это не вариант для использования в этом конкретном сценарии.

Ответ 1

Как заявляет ошибка, Angular запрещает доступ к узлам DOM в выражениях.

CoffeeScript использует неявный return, если ни один не указан.

Это означает, что, например, функция scope.open в вашем коде будет:

return element.dialog('open');

Angular обнаружит это и выбросит ошибку.

Если вы добавите явный return, он должен решить проблему:

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

Ответ 2

Несмотря на то, что принятый ответ правильный, я хотел бы поделиться своим опытом, так как это оказалось другой проблемой. На самом деле у меня была такая же проблема, но я вообще ничего не возвращал из своей функции (и не использовал CoffeeScript), поэтому я немного озадачился и изо всех сил пытался найти решение.

В моем случае проблема заключалась в том, что я передавал DOM node в качестве аргумента для такой функции:

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

То, что оказалось здесь решением, заключалось в изменении упомянутого кода, чтобы передать только событие и не node напрямую:

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

Затем выберите node в контроллере/директиве/как угодно:

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

Ответ 3

Происходит, когда выражение пытается получить доступ к DOM node.

AngularJS ограничивает доступ к узлам DOM изнутри выражений, поскольку это известный способ выполнения произвольного кода Javascript.

Эта проверка выполняется только для вызовов объектов и функций в выражениях Angular. Это места, которые разработчику сложнее защищать. Точечный доступ к члену (например, a.b.c) не выполняет эту проверку - разработчик должен не подвергать такие чувствительные и мощные объекты непосредственно в цепочке областей видимости.

Чтобы устранить эту ошибку, избегайте доступа к узлам DOM.

Ошибка $parse:isecdom также возникает, когда обработчик события вызывает функцию, которая возвращает DOM node.

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

JS:

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

Чтобы устранить эту проблему, не возвращайте узлы DOM из обработчиков событий.

Примечание. Эта ошибка часто означает, что вы обращаетесь к DOM с ваших контроллеров, что обычно является признаком плохого стиля кодирования, который нарушает разделение проблем.

Неявные возвращения в CoffeeScript

Эта ошибка может возникать чаще при использовании CoffeeScript, которая имеет функцию, называемую неявным возвратом. Эта языковая функция возвращает последний разыменованный объект в функции, когда функция не имеет явного оператора return.

Решение в этом случае состоит в том, чтобы добавить явный оператор return. Для example return false для функции.

Ошибка: $parse: isecdom Ссылка на DOM node в выражении