Question

我试图将按钮的文字改为＆＃34;正在加载＆＃34;而在AngularJS中处理api请求。我使用了buttontext的范围变量。我注意到变量在浏览器开发者控制台中得到更新，但在Chrome中的ng-inspector面板中没有更新。我无法弄清楚为什么按钮文字没有变化。我认为它与相应变量在控制器函数内的事实有关。这是我的AngularJS代码：

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);
                }; 
            });

这里是按钮HTML：

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

Answer 1

你需要把

$scope.buttontext = "Get Insight";

在promise回调中，因为此时你的流程是：

将文字更改为＆＃34;正在加载＆＃34;
发出API请求（并在后台等待）
将文字更改为＆＃34;获取洞察力＆＃34; inmediately

因此，您的文字会从＆＃34;获取洞察力＆＃34; - ＆GT; ＆＃34;加载＆＃34; - ＆GT; ＆＃34;获取洞察力＆＃34;这么快就被忽视了。

Answer 2

将最后一行移到回调/保证逻辑中，例如：

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);
            }; 
        });

但您仍需要处理一些错误情况。

按钮文本未从AngularJS中的控制器功能更新

2 个答案: