button text not updating from controller function in AngularJS

Question

I'm trying to change the text of a button to "Loading" while an api request is processing within AngularJS. I use a scope variable of buttontext. I noticed the variable gets updated in the browser developer console but doesn't get updated in the ng-inspector panel in Chrome. I can't figure out why the button text doesn't change. I figure it has to do with the fact the corresponding variable is inside a controller function. Here's my AngularJS code:

angular.module('twitterApp', ['ngResource'])
.controller('mainController', function($scope, TwitterUser, KloutUser) {
                $scope.buttontext = "Get Insight";                  
                $scope.error = false;
                $scope.users = [];
                $scope.getResult = function(id){
                    $scope.users = [];
                    $scope.buttontext = "Loading";
                    $scope.loading = true;
                    TwitterUser.get({
                        id: id
                    }, function(user) {                     
                        if(user.error) {
                            $scope.error = true;
                            $scope.message = "Validation Error please fill the user_id or screen_name field";
                        }else{
                            if(!user.errors){
                                console.log(user);
                                $scope.users.push(user);
                                $scope.error = false;
                            }else{            
                                $scope.error = true;
                                $scope.message = user.errors[0]['message']+" - "+user.errors[0]['code'] ;
                            }               
                        }                      
                    }).$promise.then(function(user){
                        KloutUser.get({
                            id: user.id
                        }, function(userkloutscore) {
                            if(!userkloutscore) {                           
                                console.log('An error occurred. No Klout score returned.');
                            }else{
                                $scope.kloutscore = userkloutscore.score;
                                var score_stringified = JSON.stringify(userkloutscore);
                                console.log('The Klout API response: ' + score_stringified);
                            }
                        });
                    });
                    $scope.buttontext = "Get Insight";                      
                };              
                $scope.removeUser = function(index){
                    $scope.users.splice(index, 1);
                }; 
            });

And here's the button HTML:

<a class="btn btn-primary" role="button" ng-click="getResult(id)">{{ buttontext }}</a>

Giovanni Benussi · Accepted Answer · 2016-05-02 20:27:50Z

3

You need to put

$scope.buttontext = "Get Insight";

Inside the promise callback, because at this moment your flow is:

Change text to "Loading"
Make the API request (and wait in background)
Change text to "Get Insight" inmediately

So your text makes the change from "Get Insight" -> "Loading" -> "Get Insight" so rapidly that it goes unnoticed.

answered May 2, 2016 at 20:27

Giovanni Benussi

3,5602 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AvrahamR · Accepted Answer · 2016-05-02 21:07:31Z

Move the last line to inside your callback/promise logic, like:

angular.module('twitterApp', ['ngResource'])
.controller('mainController', function($scope, TwitterUser, KloutUser) {
            $scope.buttontext = "Get Insight";                  
            $scope.error = false;
            $scope.users = [];
            $scope.getResult = function(id){
                $scope.users = [];
                $scope.buttontext = "Loading";
                $scope.loading = true;
                TwitterUser.get({
                    id: id
                }, function(user) {                     
                    if(user.error) {
                        $scope.error = true;
                        $scope.message = "Validation Error please fill the user_id or screen_name field";
                    }else{
                        if(!user.errors){
                            console.log(user);
                            $scope.users.push(user);
                            $scope.error = false;
                        }else{            
                            $scope.error = true;
                            $scope.message = user.errors[0]['message']+" - "+user.errors[0]['code'] ;
                        }               
                    }                      
                }).$promise.then(function(user){
                    KloutUser.get({
                        id: user.id
                    }, function(userkloutscore) {
                        if(!userkloutscore) {                           
                            console.log('An error occurred. No Klout score returned.');
                        }else{
                            $scope.kloutscore = userkloutscore.score;
                            var score_stringified = JSON.stringify(userkloutscore);
                            console.log('The Klout API response: ' + score_stringified);
                        }
                        $scope.buttontext = "Get Insight";
                    });
                });                      
            };              
            $scope.removeUser = function(index){
                $scope.users.splice(index, 1);
            }; 
        });

But you still need to handle some error scenarios.

Collectives™ on Stack Overflow

button text not updating from controller function in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related