$ scope。$ watch在AngularJS 1.6中不收听

Question

I have a problem with my script which collects data from database in parts. I would like to inform Angular when downloading data is finished so I used $watch. Unfortunatelly, it does not work. Angular calls function at the beginning instead of after change loadingComplete value.

angular
.module('app')
.controller('tlmController', function($scope, $http) {
    var vm              = this;
    var data            = [];
    vm.countTestLines   = 0;
    vm.loadingComplete  = false;

    $scope.$watch('vm.loadingComplete', function() {
        console.log(data);
    });     

    $http({
        method: 'GET',
        url: 'app/server/tt/count_testlines.php'
    }).then(function successCallback(response) {
        vm.countTestLines = parseInt(response.data.count);

        downloadInParts(data, 0, vm.countTestLines);

    }, function errorCallback(response) {
        console.log('error');
    });

    var downloadInParts = function(data, offset, max) {         
        if(max < offset) { 
            vm.loadingComplete = true;
            return;
        }

        $http({
            method: 'GET',
            url: 'app/server/tt/get_testlines.php',
            params: { offset: offset }
        }).then(function successCallback(response) {
            data = data.concat(response.data);          
            downloadInParts(data, offset + 5, max);
        }, function errorCallback(response) {
            console.log('error');
        });


    }

});

Answer 1

The problem is that the loadingComplete is not a part of the scope. you should declare it as $scope.loadingComplete; .

Answer 2

If you are using var vm = this , which is the proper way according to JohnPapa's styleguide for AngularJS, you should rewrite your $watch to:

$scope.$watch(function(){ return vm.loadingComplete }, function() {
    console.log(data);
});

Update from comments: Your function parameter data hides your data variable from your controller.

Answer 3

Since you are using 'vm' instead of '$scope', it is a necessary that you need to insert $scope.$apply in your function.

if(max < offset) { 
     vm.loadingComplete = true;
     $scope.$apply();
     return;
  }

$scope always watches for change in value and if there is any, Angular will call the $digest() function internally and the changed value will be updated. Using 'vm' wont update the value which results in your problem.