我遇到问题,我在用户登录时尝试使用ng-show
ng-view
查看视图。默认情况下,当控制器初始化时,值vm.isLoggedIn
为false {1}}在登录时设置为vm.isLoggedIn
。
但是这不会更新用户界面以反映更改,true
仍会有ng-show
,当您使用class="ng-hide"
对其进行十分转换时,AngularJS会将其放在那里。
如果在返回承诺时ng-show
更新为vm.isLoggedIn
,如何让用户界面反映更改?
以下是true
:
HTML
这是我的控制器,其中包含所有内容:
<div id="loggedInContainer" ng-show="vm.isLoggedIn">
<div ng-view></div>
</div>
这是我用来登录用户的服务,使用(function () {
"use strict";
var app = angular.module("productManagement");
var MainCtrl = function ($scope, $timeout, userAccount) {
var vm = this;
vm.isLoggedIn = false;
vm.message = "";
vm.userData = {
userName: "",
email: "",
password: "",
confirmPassword: ""
};
var applyChanges = function () {
$timeout(function () {
$scope.$apply();
});
}
vm.registerUser = function () {
vm.userData.confirmPassword = vm.userData.password;
vm.userData.userName = vm.userData.email;
userAccount.registration.registerUser(vm.userData, function (data) {
vm.confirmPassword = "";
vm.message = "Registration Successful";
vm.login();
}, function (errorResponse) {
vm.isLoggedIn = false;
vm.message = errorResponse.statusText + "\r\n";
if (errorResponse.data.exceptionMessage) {
vm.message += errorResponse.data.exceptionMessage;
}
// Validation Errors
if (errorResponse.data.modelState) {
for (var key in errorResponse.data.modelState) {
vm.message += errorResponse.data.modelState[key] + "\r\n";
}
}
});
}
vm.login = function () {
vm.userData.grant_type = "password";
vm.userData.userName = vm.userData.email;
userAccount.login.loginUser(vm.userData, function (data) {
vm.isLoggedIn = true; // This is where vm.isLoggedIn is set to true
vm.message = "";
vm.password = "";
vm.token = data.access_token;
//$("#loggedInContainer").removeClass("ng-hide"); // Hack used to manually remove the class
}, function (errorResponse) {
vm.password = "";
vm.isLoggedIn = false;
vm.message = errorResponse.statusText + "\r\n";
if (errorResponse.data.exceptionMessage) {
vm.message += errorResponse.data.exceptionMessage;
}
if (errorResponse.data.error) {
vm.message += errorResponse.data.error;
}
});
}
}
app.controller("MainCtrl", ["$scope", "$timeout", "userAccount", MainCtrl]);
})();
$resource
我尝试手动使用(function () {
"use strict";
var app = angular.module("common.services");
var userAccount = function ($resource, $http, appSettings) {
return {
registration: $resource(appSettings.serverPath + "/api/Account/Register", null,
{
"registerUser": { method: "POST" }
}),
login: $resource(appSettings.serverPath + "/Token", null,
{
"loginUser": {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
transformRequest: function (data, headersGetter) {
var str = [];
for (var d in data) {
str.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
}
return str.join("&");
}
}
})
}
}
app.factory("userAccount", ["$resource", "$http", "appSettings", userAccount]);
})();
,$scope.$apply()
,甚至是$scope.$digest()
,但这些都没有正常使用。我得到$timeout()
错误或根本没有任何事情发生。
我可以使用的唯一工作是使用jQuery手动删除div上的类,但这不是使用AngualrJS执行此操作的正确方法。