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 в выражении