사용자가 로그인 한 후 Angularjs : 지시어 업데이트보기

Question

사이트에 사용자가 좋아하는 항목을 표시하는 로그인 화면과 위젯이있는 앱이 있습니다. 사이트 HTML

<header data-ng-controller="SideBarController"> 
    <section id="sidebar"> 
     <div sidebar-user-info></div> 
     <div sidebar-my-favorites-list></div> 
     <p class="full"><a href="#/logout">logout</a></p> 
    </section> 
</header> 

<script id="sideBarFavoritesList_template" type="text/ng-template"> 
    <ul id="my-favorites" class="full no-bullets"> 
     <li data-ng-repeat="fav in myFavorites"> 
      <a href="#" id="{{fav.id}}"><img ng-src="/gfx/apps/icons{{ fav.icon }}" width="36" height="36" alt="{{ fav.name }} icoon" class="favicon">{{ fav.name }}</a> 
     </li> 
    </ul> 
</script> 

나는 다음있어 인라인 템플릿 블록

위젯

App.directive('sidebarMyFavoritesList', ['$rootScope', function sideBarMyfavoritesList($rootScope) { 
    return { 
     template: $('#sideBarFavoritesList_template').html(), 
     restrict: 'A', 
     replace: true 
    }; 
}]); 

전체 사이드

을 둘러싼 컨트롤러를 렌더링 지침

function SideBarController($http, $scope, $rootScope, helper, UserService) 
{ 
    $rootScope.user = UserService.data; 
    $rootScope.loggedIn = UserService.isLogged; 

    $scope.toggleBar = function toggleBar() { 
     if (!UserService.isLogged) { 
      return; 
     } 
     $rootScope.state.appbar = !$rootScope.state.appbar; 
    }; 

    var serviceUrl = "/api/favorites/user"; 
    $http.get(serviceUrl).success(function(d) { 
     $scope.myFavorites = d.data; 
    }); 
} 

사용자가 로그인하면 UserService이 업데이트되지만 사이드 바는 항상 표시됩니다. 내가 원하는 것은 사이드 바가 스스로 새로 고쳐져 사용자의 즐겨 찾기를 렌더링한다는 것입니다.

rootscope에서 사용자가 성공적으로 로그인 한 후 루트 스코프를 사용하여 사용자 정보를 찾았습니다. 그러나 그것은 매우 해키 한 느낌입니다.

내가 보는 방식으로, 사용자가 로그인 한 후 해당 서비스에 대한 아약스 호출을 다시 실행해야하지만 어디에서해야하는지 잘 모릅니다.

로그인 후 페이지를 새로 고치면 처음 페이지로드가 시작될 때 서버 쪽에서 사용자 세션을 사용할 수 있기 때문에 즉시 작동합니다.

Answer 1

UserService가 $ rootScope.user를 업데이트하면 SideBarController에서 $ rootScope.user를보고 $ scope.myFavorites를 업데이트 할 수 있습니다.

Answer 2

UserService.data은 개체 리터럴을 반환해야합니다. 귀하의 코드를 보면, 그것이 반환하는 문자열이나 객체 리터럴인지 확신 할 수 없습니다. 객체 리터럴 인 것이 중요합니다. 참조로 전달할 수 있고 동일한 참조를 사용하여 독립적 인 범위에 바인딩 할 수 있기 때문입니다. rootScope에 바인딩하는 것은 불필요하게됩니다.

서비스 :

app.factory('UserService', function() { 
    var user = {}; 
    var serviceUrl = "/api/favorites/user"; 
     $http.get(serviceUrl).success(function(d) { 
     angular.extend(user,d.data); 
    }); 

    return { 
     data:user   
    }; 
}); 

SideBarController :

app.controller('SideBarController', function($scope, UserService) { 
     $scope.loginInfo = UserService.data; 
}); 

중요한 점은이 솔루션에 대한주의 사항

1. UserService (모든 서비스 같은) 싱글이다 - 하나를 의미하는 인스턴스는 모든 컨트롤러와 명령문간에 공유됩니다.
2. UserService.data는 처음에는 빈 개체 리터럴을 반환하지만 비동기 적으로 $http.get을 호출 한 후 업데이트합니다.
3. 모든 속성 (loggedIn 포함)은 개체 리터럴 내에 저장됩니다. 이것은 범위에 바인딩 할 때 결코 가치있게 전달하지 않도록하기위한 것입니다.
4. 모든 범위 바인딩은 참조 기준입니다 (값 제외). 따라서 UserService.data가 변경되면이를보고있는 모든 독립적 인 범위가 자동으로 업데이트됩니다.
5. rootScope는 필요하지 않습니다.

필자는 외부 의존성이 적은 (즉, 루트 범위에서) 모듈화되어 있기 때문에이 방법을 선호합니다.