AngularJS使用服务在控制器之间共享数据并监视更新

Question

这里的任务很简单，但不确定错误。

我的服务：

app.factory('Progress', function () {
    var data = {
        progressPercentageLoaded: 0
    };
    return {
        getProgress: function () {
            return data.progressPercentageLoaded;
        },
        setProgress: function (progress) {
            data.progressPercentageLoaded = progress;
        }
    };
});

我有一个正在上传文件的控制器，这个控制器设置进度值。

//in my controller
$scope.progressPercentageLoaded = {progress:0};
//a few lines down
function (evt) {
console.log(evt);
$scope.progressPercentageLoaded.progress = evt.loaded;
Progress.setProgress($scope.progressPercentageLoaded.progress);

我的第二个控制器应该只是监视服务的更改并更新视图，但即使我确认上传正在进行并且evt.loaded正在更改，它仍停留在零。

$scope.progress = 0;
$scope.$watch(function () { return Progress.getProgress(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) {
            $scope.progress = Math.min(100, parseInt(100 * newValue / $scope.size));
            if($scope.progress == 100)
            {
                $scope.progressModalInstance.close();
                window.location.reload();
            }
        }
    });

也就是说，第二个控制器中的$scope.progress应使用第一个控制器中的 evt.loaded 值进行更新，但事实并非如此。

提前感谢您的任何指导。

编辑：我什至添加了第三个watch参数作为true但这也没有帮助。

编辑

2 ：据我所知，上面的代码实际上可以正常工作，我相信还有其他原因导致了问题，因为当我在编辑代码后由于答案而将代码恢复到上面时，它突然像它应该的那样工作。对此感到抱歉。

Answer 1

使用 $rootScope.$broadcast 会更好地解决这个问题

app.factory('Progress'， function ($rootScope( {

var data = {
    progressPercentageLoaded: 0
};
    return {
        getProgress: function () {
            $rootScope.$broadcast('Event');
            return data.progressPercentageLoaded;
        },
        setProgress: function (progress) {
            data.progressPercentageLoaded = progress;
        }
    };
});

在第二个控制器中，而不是使用手表类似的东西

$rootScope.$on('Event', function(){
    //your logic here
})

Answer 2

您将丢失引用，因为您正在监视每次更新的Int值，因此您正在更改引用。你必须progressPercentageLoaded观看整个对象。

您必须传递 true 作为 $watch 函数的最后一个参数，以便angular.equals相等性检查。否则，仅检查引用相等性。

Answer 3

我不是 100% 确定，但 Angular 可能不知道文件上传事件。尝试拨打$apply：

$scope.$apply(function() {
   Progress.setProgress($scope.progressPercentageLoaded.progress);
});