angularjs - 需要帮助来理解 Angular $watch

Question

假设我有一个专辑列表，用户可以添加专辑

controller.albumList = function($scope, albumService) {
    $scope.albums = albumService.query();

    $scope.$watch('$scope.albums',function(){
        $scope.albums.$save($scope.albums)
    })

    $scope.addalbum= function(){
        $scope.albums.objects.push(album);   
    }
};

1. 从服务器获取专辑列表并显示它们
2. 用户可以添加相册
3. 查看专辑列表，发生变化时将其保存到服务器。

问题是 $watch 总是触发，我什至没有触发 addalbum 方法，每次刷新页面都会创建一个新相册。

我遵循todeMVC Angular中的代码

这里是示例代码

var todos = $scope.todos = todoStorage.get();

$scope.newTodo = '';
$scope.editedTodo = null;

$scope.$watch('todos', function () {
    $scope.remainingCount = filterFilter(todos, { completed: false }).length;
    $scope.completedCount = todos.length - $scope.remainingCount;
    $scope.allChecked = !$scope.remainingCount;
    todoStorage.put(todos);
}, true);

请帮我理解这一点

Answer 1

这是一个解决方案:

$scope.$watch('albums', function(newValue, oldValue) {
    if (angular.equals(newValue, oldValue)) {
        return;
    }

    $scope.albums.$save($scope.albums);
}

在观察程序注册到作用域后，将异步调用监听器 fn(通过 $evalAsync)来初始化观察程序。在极少数情况下，这是不希望的，因为当 watchExpression 的结果没有更改时调用监听器。要在监听器 fn 中检测这种情况，您可以比较 newVal 和 oldVal。如果这两个值相同 (===)，则监听器由于初始化而被调用。

有关 $watch 监听器的更多信息:$watch at angularjs docs