1

我正在使用从 Firebase 与 angularFire 同步/获取的数据来构建 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 顺序呈现在网站上，并且每个元素/模型都可以使用 textarea 进行编辑：

<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-repeat 在每次击键时工作。这会导致文本区域失去焦点，页面在渲染时闪烁，最烦人的是，在重新生成页面之前，我一次只能输入一个字符。不知道如何解决这个问题。
谢谢你的时间，
贾里德

4

1 回答 1

0

我在这里遇到了类似的问题：hang-model-value-in-one-controller-triggers-model-update-in-others。

每次更改模型对象时，都会在 $rootScope 上调用摘要循环，这将更新所有范围。

一种解决方法是为 Firebase 和实际元素设置两个单独的模型变量，这样您的 textarea 中的更改就不会调用 Firebase。然后有一个 $timeout() 函数在后台“同步”这两个模型对象（递归地遍历属性并仅在它们被更改时更新/删除它们）。

于 2013-09-13T21:39:43.420 回答