4

具体的には、innerHTML を使用せずに要素を更新する方法を知りたいです。ドキュメントでは、innerHTML (ctrl-f innerHTML -- 申し訳ありません)で再レンダリングしないため、他のテンプレート エンジンよりも優れていることを明確に述べています。ソースコードをざっと調べ始めましたが、たくさんあり、皆さんからより迅速な回答を得られることを望んでいました.

これまでのところ、私の推測は

  • コンパイラは、データが変更されたときにリンカーが更新できる{{test}}ようなものに変換し<ng-bind>test</ng-bind>ますが、レンダリングされた Angular ページの DOM を見ると、これが起こっているようには見えません。また、Angular の外部にあるクライアントの CSS やその他の JavaScript コンポーネントに干渉する可能性があるようです。
  • 彼らは実際には innerHTML を使用していますが、DOM 全体を再レンダリングしているのではなく、その小さなスニペット (おそらく何らかのカスタム<ng-bind></ng-bind>タグ内のデータ) にすぎません。
  • 彼らはどういうわけか新しい要素を削除して追加しています...悪い推測だと思います。

知っている人がいたら教えて欲しいです。それ以外の場合は、ソース コードに戻ります。

新しい推測を編集

もう少し考えた後、私はこれが起こるかもしれないと信じています：コンパイラはhtmlを飲み込み、次のように言います

<p> 
  {{model}} 
  <div> 
    <p> Hello ! </p> 
  </div> 
</p>

そして、これを次のように変換します。

<p class="ng-binding"> 
  {{model}} 
  <div> 
    <p> Hello ! </p> 
  </div> 
</p>

次に、Angular は、すべての Angular テキスト ノードをクロールしてインデックスを作成できます ( {{model}}) eg document.getElementsByClass('ng-binding')[0].childNodes[0]。格納された各ノードは、リンカによってスコープ モデルに関連付けることができます$scope['model']。] (簡略化)` を設定することで、各ノードを非常に迅速に更新できnode.nodeValue = $scope['somemodelます。技術的には、innerHTML は不要であり、超高速の DOM 更新です。

4

1 に答える 1

5

要素自体を置き換えるのではなくinnerHTML、Angular は既存の要素のプロパティを変更することを好みます。

ディレクティブは実際にはng-bind良い例です。への参照を保持し、変更 ( source )としてelement更新するだけです。.text()$scope

var ngBindDirective = ngDirective(function(scope, element, attr) {
  element.addClass('ng-binding').data('$binding', attr.ngBind);
  scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
    element.text(value == undefined ? '' : value);
  });
});

innerHTMLこれは、特に新しいコンテンツを作成するときに、必ずしも Angular が使用しないことを意味するわけではありません。ただし、可能であれば回避しようとします。

于 2013-08-13T00:13:56.177 に答える