Question

我尝试在我的网络应用中实现注册功能，现在我可以将日期发布到我的服务器并获得用户数据的响应，我的逻辑是从服务器获得响应后，我的应用程序转到app.loggedin状态，我使用ui-router配置如下：

    .state('app.loggedin',{
      url:'',
      views: {  
          'header@':{  // specify the view need to change
                  templateUrl:'header.html'
                      }  ,

           'content@':{  // specify the view need to change
                 templateUrl:'main.html'
                      }  

        }
    }),

我希望导航栏在登录后显示用户的用户名，我在我的控制器中更新$ scope.user，我确实喜欢这个：

 $scope.user
      UserFactory.register(username,password,function(err,result){
                                  if (err) {
                                    // do something

                                  }


                                    $state.go('app.loggedin',{reload :true});
                                    $scope.user=result.user;
                                    console.log($scope.user);


                          });

和我的HTML：

    <ul class="nav navbar-nav  color-white navbar-right" ng-controller="UserController">
  <li ng-if="!user"><a ui-sref="app.signup"><span class="glyphicon glyphicon-user"></span> signup</a></li>
  <li ng-if="!user"><a ui-sref="app.login"><span class="glyphicon glyphicon-log-in"></span> login</a></li>
  <li ng-if="user">
    <a ui-sref="app.signup"> {{user.username}}</a>
  </li>

</ul>

控制台可以正确打印用户，但scope.user在我的视图中没有更新，它是否仍然为空，因此无法显示用户的用户名。如果我将ng-if =“！user”更改为ng-if =“user”，则不会显示注册。这里有什么不对，我被困在这里几个小时，请帮忙。谢谢，它也是操纵DOM的正确方法吗？我是Angular的新手，我看到有人使用Directive来操纵DOM，任何想法？

添加：服务（ 'UserFactory'，[ 'SharedDataFactory'， '$ HTTP'， '基本URL'，功能（SharedDataFactory，$ HTTP，基本URL）{

            this.register = function(username,password,callback){
                $http.post(baseURL+'user/register',
                    {username:username,password:password}).then(
                    function(response){
                          callback(null,response.data);
                    },
                    function(response){
                    callback(response.data,null);
                    }
                    );               
            };     
    }])

Answer 1

<ul class="nav navbar-nav  color-white navbar-right" ng-controller="UserController">
 <li ng-if="!user"><a ui-sref="app.signup">
   <span class="glyphicon glyphicon- user"></span> signup</a></li>
 <li ng-if="!user"><a ui-sref="app.login">
   <span class="glyphicon glyphicon-log-in"></span> login</a></li>
 <li ng-if="user">
   <a ui-sref="app.signup"> {{user}}</a>
</li>

</ul>

使用user而不是user.username

Answer 2

我认为您的问题是，在成功登录后，您正在转换到其他州：

$state.go('app.loggedin',{reload :true});
$scope.user=result.user;
console.log($scope.user);

$state.go将加载一个新状态（reload:true将强制它成为一个全新的状态，即使它与当前状态相同）。控制器和相关的范围不会被重复使用，因此在状态转换后您将拥有一个全新的UserController实例，但您的执行代码仍然引用旧的（很快被销毁）{{1 }}

解决方案是将用户详细信息推送到服务中，因为服务始终是单例。您已有服务，因此您可以在那里存储详细信息。

所以在UserController中，类似于：

$scope

和UserFactory类似：

$scope.user = UserFactory.user;

请注意，服务会更新用户对象而不是替换它。这意味着通过service('UserFactory',['SharedDataFactory','$http','baseURL', function(SharedDataFactory,$http,baseURL){ var self = this; this.user = {}; this.register = function(username,password){ return $http.post(baseURL+'user/register', {username:username,password:password}).then( angular.copy(response.data, self.user); return self.user; }); }; }])引用也可以看到更改的属性。此外，我更改了您的函数以返回promise而不是使用回调，因为这将简化对响应的进一步处理。

然后你可以从寄存器控制器调用注册函数：

$scope.user

更改控制器剂量中的$ scope值不会反映在视图中

2 个答案: