1

angularFireを使用してFirebaseから同期/フェッチされたデータを使用してDOMを構築しています。すべての DOM 要素は、次の単純なディレクティブで構築されます。

angular.module('App')
  .directive('acmsElement', function () {
    return {
      template: '<div ng-transclude></div> ',
      restrict: 'E',
      scope: {elem: '='},
      transclude: true,
      replace: true,
      link: function postLink(scope, element, attrs) {
        var el = angular.element(scope.elem.tag);
        if(scope.elem.content){
          el.text(scope.elem.content);
        }
        if(scope.elem.attributes) {
          el.attr(scope.elem.attributes);
        }
        element.append(el);
      }
    };
  });

すべての要素は、ng-repeat を使用して Web サイト上で順番にレンダリングされ、すべての要素/モデルはテキストエリアで編集可能になります。

<div ng-repeat="el in elems">
  <acms-element elem="el">
    <textarea style="width: 100%" ng-model="el.content"></textarea>
  </acms-element>
</div>

Firebase では、ノードは配列として格納されるため、ng-repeat を使用して正しい順序で表示するのは簡単です。上記のテキストエリアにバインドされたモデルを編集しようとすると、問題が発生します.ng-は、キーストロークごとにその作業を繰り返します。これにより、テキスト領域へのフォーカスが失われ、ページがレンダリングされるときにちらつきます。最も厄介なことに、ページが再生成される前に一度に 1 文字しか入力できません。問題に取り組む方法がわからない。
時間をありがとう、
ジャレッド

4

1 に答える 1

0

ここでも同様の問題がありました: hang-model-value-in-one-controller-triggers-model-update-in-others。

モデル オブジェクトが変更されるたびに、$rootScope でダイジェスト サイクルが呼び出され、すべてのスコープが更新されます。

回避策は、Firebase と実際の要素に 2 つの個別のモデル変数を用意して、テキストエリアの変更によって Firebase が呼び出されないようにすることです。次に、$timeout() 関数を使用して、バックグラウンドでこれら 2 つのモデル オブジェクトを "同期" (再帰的にプロパティを調べ、変更された場合にのみ更新/削除) します。

于 2013-09-13T21:39:43.420 に答える