Promise返回后更新ng-show值

时间:2017-10-02 14:47:15

标签: javascript jquery angularjs angularjs-scope

我遇到问题,我在用户登录时尝试使用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执行此操作的正确方法。

0 个答案:

没有答案