Question

我正在尝试控制$ scope。$ watch功能。目前，我在迭代中有一个无限循环。

$scope.$watch('dashboards', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        $scope.dashboard = $localStorage.sample;
        $scope.dashboards['1'].id = $scope.dashboards[1].id + 1;
        $localStorage.sample = $scope.dashboards[1];
        console.log('newval: '+$scope.dashboards['1'].id);
    } else {
        $scope.$storage = $localStorage;
        $localStorage.sample = $scope.dashboards[1];
        $scope.dashboard = $localStorage.sample;
        $scope.dashboards['1'].id = $scope.dashboards[1].id.length + 1;
        $localStorage.sample = $scope.dashboards[1];
    console.log('oldval: '+$scope.dashboards['1'].id);
    }
}, true);

这是我的scope.dashboards：

$scope.dashboards = {
        '1' : {
            id : '1',
            widgets : [{
                code : "bla1.html",
                col : 0,
                row : 0,
                sizeY : 1,
                sizeX : 2,
                title : "Bla1"
            }, {
                code : "bla2.html",
                col : 2,
                row : 0,
                sizeY : 2,
                sizeX : 2,
                title : "Bla2"
            }, {
                code : "bla3.html",
                col : 0,
                row : 4,
                sizeY : 1.5,
                sizeX : 2,
                title : "Bla3"
            }
}

我想要完成的是每次我的$ scope.dashboards中的小部件位置发生变化时，我会在localStorage中存储一个新的ID以保存其位置状态，以便在浏览器关闭/刷新时它仍将保留其会话/职位。也许你知道我将如何处理这个问题？谢谢！

Answer 1

问题的根源在于，通过在$ watcher（$scope.dashboards）中为$ watched值分配不同的值，您将导致无限循环。

您应该避免使用$watch作为更新$scope.dashboards.id的触发器，并使用导致窗口小部件更改的实际触发器。（偏离主题，但使用属性id稍微有点尴尬 - 我有一个非常具体的含义，我会把它改成“版本”或沿着那些行的东西）

或者，另一种选择是$只观看widgets媒体资源，而不是深度观察dashboards。

$scope.$watch("dashboards['1'].widgets", function(newVal, oldVal){
 ...
}, true);

Answer 2

您可以使用的方法概述如下：

var modificationInProgress = false;
$scope.$watch('dashboards', function(newVal, oldVal) {
  if (!modificationInProgress) {
    modificationInProgress = true;
    // modify dashboards
  }
  $timeout(function() {
    modificationInProgress = false;
  }, 0);
});

如果您希望仪表板在同一刻度中多次修改，则可能会导致一些有趣的错误。但是，如果您只希望每个刻度修改一次仪表板（例如，当用户点击按钮时），这应该可以。

但是 - 你的代码很奇怪。我认为重构它以避免观察和修改相同的变量可能是你最好的举动。例如，您可能希望观察不同的对象并存储它们在单独对象上移动的次数，从而避免无限循环问题。

如何控制$ scope。$ watch iteration？

2 个答案: