具有角$ resource.save保存导致以重绘/回流由于集合守望者 [英] Saving with angular $resource.save causes view to redraw/reflow due to collection watcher

问题描述

我必须使用$资源商店，我加载和模型。该模型是一个聚集，并使用NG-重复嵌套的集合，这是绑定到HTML视图。

I have a model which I load and store using $resource. The model is an aggregate and has nested collections inside, which are binded to an html view using ng-repeat.

型号：

{
    someRootField: "blabla",
    sectionCollection: [
        {
            name: "section1"
            ....
        },
        {
            name: "section2",
            ....
        }
    ]
}

HTML

<div ng-repeat="section in myModel.sectionCollection">
...
</div>

控制器：

MyModelResource = $resource(config.api4resource + 'models/:id', {id:'@_id'});
$scope.myModel = MyModelResource.get({id: xxxx});

问题：当我使用$保存在这个模型中，它会导致重装/重绘屏幕的某些部分（似乎不是根域，但在收集相关的），如果节中的某些绑定元素输入，聚焦太丢失。我做了一些调试，这里是什么，我认为正在发生的事情。

The problem: when I use $save on this model, it causes a reload/redraw of some portions of the screen (seems not the root fields, but the collection related ones), if some binded elements within the sections are inputs, focus is lost too. I did some debugging and here is what I think is happening.

1. 当我保存模型，从POST命令镜结果身体的要求，并基于myModel被重新填充它。在模型的根简单字段是pretty大体相同，所以手表（）机制不检测变化存在，但是sectionCollection数组中的对象是不同的，因为它们是由它们的内容不相但引用的平等和失败，这将导致与集合关联的UI控件被完全重新加载/重绘。

有在$ watchCollectionWatch（）在这个角度code：

There is this code in $watchCollectionWatch() in angular:

      } else if (isArrayLike(newValue)) {
        if (oldValue !== internalArray) {
          // we are transitioning from something which was not an array into array.
          oldValue = internalArray;
          oldLength = oldValue.length = 0;
          changeDetected++;
        }

        newLength = newValue.length;

        if (oldLength !== newLength) {
          // if lengths do not match we need to trigger change notification
          changeDetected++;
          oldValue.length = oldLength = newLength;
        }
        // copy the items to oldValue and look for changes.
        for (var i = 0; i < newLength; i++) {
          if (oldValue[i] !== newValue[i]) {
            changeDetected++;
            oldValue[i] = newValue[i];
          }
        }
      }

在我的情况，我肯定见过的属性oldValue [I] =为newValue [I]比较失败，对象是不同的。其中一个原因是属性oldValue包含的变量与$这是指回到那个是对每个项目pviously创建$ P $的范围pfixed $ P $。

in my case, I've definitely seen the oldValue[i] = newValue[i] comparison fail, the objects were different. One of the reason is oldValue contained variables prefixed with $ that were referring back to the scopes that were previously created for each item.

现在的问题是，我怎么能prevent回流？或者我怎么能做到这一点不同，以避免它。保持自己的模型的两个副本，一个为$资源，另一个用于绑定查看和手动它们之间同步看起来不正确。

The question is, how can I prevent a reflow? Or how can I do it differently to avoid it. Keeping myself two copies of the model, one for $resource and another for binding to view and synchronizing between them manually does not seem right.

谢谢！

推荐答案

您可以使用 $ HTTP 服务，以避免模式的更新，节省$原因：

You can use $http service to avoid model updates that $save cause:

$scope.save2 = ->  $http.get 'blah_new.json'

我用 GET 例子，但你可以使用任何你的的快捷方法，这个列表。这里是一个简单的例子普拉克。

I used get in example but you can use whatever you need from this list of shortcut methods. And here is a simple example plunk.

也很简单，以节省的Elemen的重点重新描绘后：

Also it's simple to save elemen's focus after rerendering:

  $scope.save = -> 
    active = document.activeElement.getAttribute 'id'
    $scope.user1.$save ->
      document.getElementById(active).focus()

这篇关于具有角$ resource.save保存导致以重绘/回流由于集合守望者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！