Question

我正在使用Angular创建登录页面。在后端处理登录后，我从LoginCtrl设置MyService中的值，然后使用$window.location.href= 'main.jsp';移动到下一页。但是当我从HomeCtrl调用我在LoginCtrl中设置的值时，值为空？

我知道服务是单身人士，并且会在整个应用程序中保持相同的状态。但在这种情况下，它会重置。我认为这是因为使用了$ window.location.href。请帮我解决我的问题。

这是我的服务（MyService）：

app.service('MyService', function() {
    var user = {
        name: '',
        permissions: ''
    };

    this.getUser = function() {
        return user;
    }

    this.setUser = function(userr) {
        this.user = userr;
    }
});

这是我的LoginCtrl :(我刚刚发布了http.post部分）

$http({
                method: 'POST',
                url: 'login',
                data: JSON.stringify($scope.user),
                headers: {
                    'Content-Type': 'application/json'
                }
            }).success(function(data) {
                if (!("failure" == data)) {
                    console.log(data);
                    var user = MyService.getUser();
                    user.name = data.name;
                    user.permissions = data.permissions;
                    console.log(user);
                    console.log(MyService.getUser());

                     $window.location.href = 'main.jsp';
                    // MyService.changeLocation('main.jsp', true);
                } else {
                    $scope.information = "Invalid username/password!"
                }
            }).error(function(data) {
                console.log(data);
            });

这是我的HomeCtrl：

app.controller('HomeCtrl', function($scope, $http,MyService) {

    console.log(MyService.getUser());
    var user = MyService.getUser();
    $scope.flashMessage="Hello " + user.name;
});

此处user.name为空。

Answer 1

您正在更改网页。角度应用程序不会在网站边界上持久存在;删除对window.location.href。

的更改

为了模拟Angular中的页面更改，请考虑使用官方路由器（Angular 1.4+附带），ngRoute或Angular UI路由器。这些解决方案使用HTML History Api和fallback来hashbang URL来模拟您尝试实现的那种东西。

这最终创建了一个单页面应用程序，这是Angular的设计目的。

Answer 2

在LoginCtrl中，在达到success回调时，您没有将响应值（在您的情况下为data）设置为user服务中的MyService对象。

您正在通过

从服务获取user对象

var user = MyService.getUser();

但是，将值设置为该对象将不会在服务中设置用户对象。

您需要使用MyService.getUser(user);在服务中设置值，HomeCtrl

中也会显示相同的值

    $http({
            method: 'POST',
            url: 'login',
            data: JSON.stringify($scope.user),
            headers: {
                'Content-Type': 'application/json'
            }
        }).success(function(data) {
            if (!("failure" == data)) {
                console.log(data);
                var user= {};
                user.name = data.name;
                user.permissions = data.permissions;
                MyService.getUser(user);  //set the values for user 
                var obj= MyService.getUser();   //get the values for user

                console.log(obj);   
               //should display user object 
               //with respective name and permissions should be available

                console.log(MyService.getUser());

                 $window.location.href = 'main.jsp';
                // MyService.changeLocation('main.jsp', true);
            } else {
                $scope.information = "Invalid username/password!"
            }
        }).error(function(data) {
            console.log(data);
        });

<强>更新

您的代码似乎无法正常工作的原因是：您正在错误地使用$ window来更改路由。 $window.location.href = 'main.html' 以某种方式更改了angular的上下文之外的路由，因此没有运行HomeCtrl 。要解决此问题，您需要执行以下操作：

首先，为角度应用定义路线（优先使用ui-router）

 app.config(function($stateProvider){
   $stateProvider
       .state('login',{
             url:'/', 
             templateUrl:'login.html',          
             controller:'LoginCtrl'
         })
         .state('main',{
             url:'/main',
             templateUrl:'main.html',
             controller:'HomeCtrl'
         })
          .state("otherwise", { url : '/'})
   })

使用$location.url('/main')。请注意，它与我们为状态定义的url模式相同：main。或者更好的是，您应该使用$state.go('home');将用户重定向到理想状态

这是一个有效的plunkr

希望这有帮助！

$ window重置我的服务

2 个答案: