在某些情况下使用 angularjs 无法更改 $scope 变量值

Question

我正在使用 angularjs 和 Monaca 来构建移动应用程序
我将这部分用于登录过程

$scope.login = function(username, password){
        $scope.isLogging = true;
        $scope.loginMsge = '';
        service.getUsernamePassword(username, password).then(function (response) { // try to connect to server data base
            if(typeof response == 'undefined'){ // there is no internet so check user and password from local data base
                console.log('local login');
                var db = window.openDatabase("Database", "1.0" , "TestDatabase" , 200000);
                db.transaction(function(transaction) {
                    transaction.executeSql("SELECT * FROM user_t WHERE username = ?;", [username], function(transaction, result) {
                        if (result.rows.length > 0) {
                            if(bcrypt.compareSync(password, result.rows[0].password) == true){
                                $scope.userLogin = true;
                                $scope.getProjects();// get projects to display them after login
                                myNav.pushPage('home.html')
                                $scope.isLogging = false;
                                console.log('login');
                            }else{ // user name and password is invalid
                                $scope.userLogin = false;
                                $scope.getProjects();// there is no need to this call here but the loginMsge will not displayed if I didn't do that
                                $scope.loginMsge = 'Invalid username and password';
                                $scope.isLogging = false;
                            }
                        }else{ // the user is not exist in data base
                            $scope.userLogin = false;
                            $scope.getProjects();
                            $scope.loginMsge = 'Invalid username and password ';
                            $scope.isLogging = false;
                        }
                    }, function(transaction, error) {
                        console.log('log failed '+error);
                    });
                });
            }else if(response.data.userLogin){
                console.log('Server login');
                $scope.userLogin = true;
                $scope.getProjects();
                myNav.pushPage('home.html');
                $scope.isLogging = false;
            }else{
                $scope.userLogin = false;
                $scope.loginMsge = 'Invalid username and password ';
                $scope.isLogging = false;
            }
        });
    }

首先我尝试连接到服务器数据库以检查用户名和密码，如果应用程序无法连接（没有互联网）我检查本地数据库中的用户名和密码

如果用户名和密码无效我想

$scope.userLogin = false;
 $scope.getProjects();// there is no need to this call here but the loginMsge will not displayed if I didn't do that
 $scope.loginMsge = 'Invalid username and password';
 $scope.isLogging = false;

如果用户名和密码正确，我想执行以下操作

 $scope.userLogin = true; // I know that user is successfully login
 $scope.getProjects();// get projects to display them after login
 myNav.pushPage('home.html')
 $scope.isLogging = false;// use this variable to display and hide circular progress

如果我不调用函数 getProjects() 将不会显示消息并且范围变量将不起作用的问题

我的控制器中的函数 $scope.getProjects

$scope.getProjects = function(){
        localDBService.getProjects().then(function(result) {
            $scope.projects = result;
        });
    }

localDBService中的getProjects()函数

 function getProjects() {
        var deferred = $q.defer();
        var projects;
        var db = window.openDatabase("Database", "1.0", "TestDatabase", 200000);
        db.transaction(function(transaction) {
            transaction.executeSql("SELECT * FROM projects_t;", [], function(transaction, result) {
                if (result.rows.length > 0) {
                        deferred.resolve(JSON.parse(JSON.stringify(result.rows)));
                }
                // deferred.resolve(result);
            }, function(transaction, error) {
                deferred.reject(error);
            });
        });

        return deferred.promise;
    };

更新：这是我的观点

<ons-template id="login.html">
    <ons-navigator var="myNav">
        <ons-page>
            <ons-toolbar>
                <div class="left"></div>
                <div class="center">Log In</div>
                <div class="right"></div>
            </ons-toolbar>
            <ons-toolbar>
                <div class="center">Login Page</div>
            </ons-toolbar>

            <div style="text-align: center; margin-top: 30px;">
                <p>
                    <ons-input id="username" ng-model="username" modifier="underbar" placeholder="Username" float ng-model="page.username"></ons-input>
                </p>
                <p>
                    <ons-input id="password" ng-model="password" modifier="underbar" type="password" placeholder="Password" float ng-model="page.password"></ons-input>
                </p>
                <div style="display: table;margin: 0 auto; "><ons-progress-circular indeterminate ng-show="isLogging" ></ons-progress-circular></div>
                <p style="margin-top: 30px;">
                    <ons-button ng-click="login(username,password)">Sign in</ons-button>
                </p>
                <div style ="text-align:center; color: red;" >{{loginMsge}}</div>
            </div>

        </ons-page>
        <ons-modal var="modal_loading_login">
            <ons-icon icon="ion-loading-c" spin="true" ></ons-icon>
        </ons-modal>
</ons-template>

Answer 1

这可能是您的变量没有触发$scope 上的重新渲染的问题。使用 $scope.$apply() 而不是您的函数调用，它应该可以工作。