javascript - Angular.js doesn't refresh the repeater after $scope.var changes but only after refresh - Stack Overflow

admin管理员组

文章数量:1356290

I thought 2 ways binding was angular thing:

I can post from a form to the controller, and if I refresh the page I see my input on the page:

$scope.loadInput = function () {

    $scope.me.getList('api') //Restangular - this part works
    .then(function(userinput) {

        $scope.Input = $scope.Input.concat(userinput);
        // scope.input is being referenced by ng-repeater in the page 
        // so after here a refresh should be triggered.

    },function(response){
        /*@alon TODO: better error handling than console.log..*/
        console.log('Error with response:', response.status);
    });
};

In the html page the ng-repeater iterates over the array of for i in input. but the new input from the form isn't shown unless I refresh the page.

I'll be glad for help with this - thanks!

I thought 2 ways binding was angular thing:

I can post from a form to the controller, and if I refresh the page I see my input on the page:

$scope.loadInput = function () {

    $scope.me.getList('api') //Restangular - this part works
    .then(function(userinput) {

        $scope.Input = $scope.Input.concat(userinput);
        // scope.input is being referenced by ng-repeater in the page 
        // so after here a refresh should be triggered.

    },function(response){
        /*@alon TODO: better error handling than console.log..*/
        console.log('Error with response:', response.status);
    });
};

In the html page the ng-repeater iterates over the array of for i in input. but the new input from the form isn't shown unless I refresh the page.

I'll be glad for help with this - thanks!

• javascript
• angularjs

Share Improve this question Follow edited Oct 22, 2013 at 14:31 ohmu 19.8k4444 gold badges112112 silver badges149149 bronze badges asked Oct 22, 2013 at 11:04 alonisseralonisser 12.1k2121 gold badges8888 silver badges144144 bronze badges 4

• have you tried putting $scope.Input = $scope.Input.concat(userinput); inside $scope.$apply ? – az7ar Commented Oct 22, 2013 at 11:51
• 1 @az7ar: If $scope.me.getList returns an angular $q promise, then we do not need to start another digest loop in its callbacks. – musically_ut Commented Oct 22, 2013 at 12:00
• @az7ar yeah.. I did, didn't help, just got console errors about digest already running.. – alonisser Commented Oct 22, 2013 at 12:20
• Can you show the markup (html)? – Davin Tryon Commented Oct 22, 2013 at 12:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try $scope.$apply:

$scope.loadInput = function () {
        $scope.me.getList('api') //Restangular - this part works
        .then(function(userinput) {
               $scope.$apply(function(){ //let angular know the changes

                $scope.Input = $scope.Input.concat(userinput);
             });

            },function(response){
                /*@alon TODO: better error handling than console.log..*/
                console.log('Error with response:', response.status);
            });
    };

The reason why: Your ajax is async, it will execute in the next turn, but at this time, you already leaves angular cycle. Angular is not aware of the changes, we have to use $scope.$apply here to enter angular cycle. This case is a little bit different from using services from angular like $http, when you use $http service and handle your response inside .success, angular is aware of the changes.

DEMO that does not work. You would notice that the first click does not refresh the view.

setTimeout(function(){
             $scope.checkboxes = $scope.checkboxes.concat([{"text": "text10", checked:true}]);
         },1);

DEMO that works by using $scope.$apply

setTimeout(function(){
            $scope.$apply(function(){
         $scope.checkboxes = $scope.checkboxes.concat([{"text": "text10", checked:true}]);
            });
        },1);

本文标签：