web-dev-qa-db-ja.com

CoffeeScript-Angular式でのDOMノードの参照は許可されていません

私の主な質問は簡単です：

コントローラまたはディレクティブ内でDOM操作を行うとエラーが発生しますが、機能は完全に動作します。

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

これらのエラーを無視し、機能性の観点（設計の観点ではなく）から、そうすることが安全であるという確認を得たい

物事をシンプルに保つために、私はこれをする必要性を疑わずにこの質問に対する簡単な答えを感謝します。

さて、誰かがより詳細に議論したい場合、私はこの要点を持っています： https://Gist.github.com/kosz/04f916a5725d85045be5 （依存関係：角度、jquery、jquery ui dialog）現在この動作が発生しているコードで。

私はこのエラーを取り除くためにこれまで最善を尽くしました、そして私が読んだものとドキュメントに基づいて、angularのdom操作はディレクティブで推奨されているようです。

そのため、ディレクティブを使用してコードを機能させましたが、それでもエラーがスローされます！？

ご覧のとおり、ユーザーが編集したい場合は、Jquery UIを使用して、リストアイテムごとに表示しています。私はDOMを直接操作していませんが、jQuery UIダイアログのクローズ/オープンイベントを制御する方法が必要です。これはAngularをエラーで満たすことはありません。

これに関する洞察は大歓迎です。

angular ui bootstrapモーダルであり、この特定のシナリオで使用するオプションではないことに注意してください。

javascriptjqueryangularjsdomcoffeescript
39
Cosmin

エラーが示すように、Angularは式でDOMノードにアクセスすることを許可しません。

CoffeeScriptは、何も指定されていない場合、暗黙のreturnを使用します。

これは、たとえばscope.openあなたのコードの関数は：

return element.dialog('open');

Angularはこれを検出し、エラーをスローします。

明示的なreturnを追加すると、問題が解決するはずです。

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

受け入れられた答えは正しいが、別の問題であることが判明したため、とにかく私の経験を共有したいと思います。実際、私は同じ問題を抱えていましたが、実際には関数から何も返さなかったので（CoffeeScriptを使用していませんでした）、少し困惑し、解決策を見つけるのに苦労しました。

私の場合、問題は次のように関数への引数としてDOMノードを渡していたように見えました：

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

ここで解決策であることが判明したのは、イベントとnotのみを直接渡すように言及されたコードを変更することでした：

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

次に、コントローラ/ディレクティブ/次のようなものでノードを取得します。

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

式がDOMノードにアクセスしようとしたときに発生します。

AngularJSは、任意のJavascriptコードを実行する既知の方法であるため、式内からのDOMノードへのアクセスを制限します。

このチェックは、Angular式のオブジェクトインデックスと関数呼び出しでのみ実行されます。これらは、開発者が保護するのが難しい場所です。ドット付きメンバーアクセス（abcなど）は、このチェックを実行しません-そのような繊細で強力なオブジェクトをスコープチェーンに直接公開しないのは開発者の責任です。

このエラーを解決するには、DOMノードへのアクセスを避けます。

$parse:isecdomエラーは、イベントハンドラーがDOMノードを返す関数を呼び出すときにも発生します。

<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ノードを参照

3
shilovk