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（＆＃39; Progress＆＃39;，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

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

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

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

3 个答案: