我正在使用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>
这可能是您的变量没有触发$scope上的重新渲染的问题。使用$scope.$apply()而不是函数调用，它应该可以工作。