2015-01-27 1 views
0

나는 html보기, angularjs 컨트롤러 및 인증 서비스를 가지고 있습니다.Angularjs로보기 위해 공장 반환 값 전달

에 Index.html :

<html> 
<body> 
<div ui-view></div> 
</body> 
</html> 

Base.html :

<div> 
    <ul> 
     <li ng-if="user">Logged in as {{user.username}}</li> 
     <li ng-if="!user"><a ui-sref="base.login">Login</a> 
    </ul> 
</div> 

app.js :

$stateProvider 
       .state('base', { 
        url: "", 
        templateUrl: "Base.html", 
      resolve: { 
       user : function(AuthSvc){ 
       AuthSvc.isLoggedIn().then(function(res){ 
       return res; 
       }, 
        function(res){ 
        return res; 
        }); 
       } 
      }, 
        controller: 'PanelCtrl' 
       }) 

Controller.js :

appControllers 
    .factory("AuthSvc", 
     ['$http', '$q', 
     'messageCenterService', '$rootScope', 
     '$state', 
     function ($http,$q, 
      messageCenterService,$rootScope, 
      $state) { 
return { 
    login: function (credentials, form) { 
     var defer = $q.defer(); 
     $http.post('/api/auth/login', credentials) 
     .success(function (response) { 
      form.$setPristine(); 
      messageCenterService.remove(); 
      messageCenterService.add('success', 
       'You are now logged in!', 
       {status: messageCenterService.status.next 
       }); 
      $state.go('base.posts.content'); 

      defer.resolve(response); 
      }) 
     .error(function (response) { 
      messageCenterService.remove(); 
      messageCenterService.add('danger', 
       response.flash, 
       {status: messageCenterService.status.unseen}); 
      defer.reject(); 
     }); 
     return defer.promise; 
         }, 
isLoggedIn: function() { 

    var defer = $q.defer(); 
    $http.get('api/auth/check').success(
      function (res) { 
       defer.resolve(res); 
      }).error(function (err) { 


       defer.reject(false); 
      }); 

    return defer.promise; 
}, 


appControllers.controller('PanelCtrl', 
     ['$scope', 'user', 'AuthSvc', 
     'vcRecaptchaService', '$idle', 
     function ($scope, user, AuthSvc, 
      vcRecaptchaService, $idle,) { 
       $scope.user = user; 

       $scope.credentials = {"email": "", "password": "", "remember": ""}; 
       $scope.login = function (form) { 
        AuthSvc.login($scope.credentials, form) 
         .then(function(res){ 
         $scope.user = res; 
         }); 

       }; 
여기에 코드입니다

페이지가로드 된 후 상태 구성에서 사용자 속성이 확인되고 html 범위 속성으로 사용할 수 있습니다. 내가 겪고있는 문제는 사용자가 범위에있는 사용자 속성에 로그인하지 않고 이전에 $ rootScope에 사용자 속성이 있었지만 이전에 로컬 범위의 속성이되고 업데이트하기 위해 서비스를 사용하고자 할 때입니다. 사용자가 로그인했지만 작동하지 않는 경우 Base.html 파일. 내가 뭘 잘못하고 또한 범위 속성에 관한 지식이 부족한지도 알아낼 수있는 도움을 주셔서 감사 드리며 나는 설명서와 다른 질문도 읽었지만 어쩌면 내가 이해하지 못하는 것이 있습니다.

답변

1

return에 대한 약속은 AuthSvc.isLoggedIn().then(...)에 의해 생성됩니다. $stateProvider은 해결하기를 기다리고 결과를 user 매개 변수로 주입합니다.

resolve: { 
    user : function(AuthSvc){ 
      // return the promise 
      return AuthSvc.isLoggedIn() 
       .then(
        function(res){ 
        return res; 
        }, 
        function(res){ 
        return res; 
        }); 
       } 
      } 
/... 
} 
+0

고마워요, 그 문제의 대부분은 여전히 ​​고정되어 있지만, 범위에서 사용자 속성을 업데이트하기 위해 브라우저를 새로 고쳐야합니다. 서버의 응답에 $ scope.user를 할당해서는 안되며 뷰를 자동으로 업데이트하거나 $ scope를 사용해야합니다. $ watch()? –