2013-05-28 3 views
2

컨트롤러간에 공유 된 서비스에 대한 캐시 요청과보기 간 전환시 페이지 상태를 유지하려면 어떻게해야합니까? 내가 할 수있는 분명Filters

.controller('Filters', ['$scope','Imgur', function($scope, Imgur) { 
    $scope.$on('updateAlbumsList', function(e) { 
     $scope.albumsList = Imgur.returnAlbumsList(); 
    }); 
    $scope.filterAlbum = function(id) { 
    Imgur.filterAlbum(id); 
    }; 
    $scope.init = function() { 
    Imgur.getAlbumsList(function(){ 
     //A hack to preserve page state 
     Imgur.loadFilters(); 
    }); 
    }; 
    $scope.init(); 
}]) 

Here is a plunker with full source.

이제

$routeProvider.when('/', {templateUrl: 'views/art.html'}); 
$routeProvider.when('/bio', {templateUrl: 'views/bio.html'}); 

art.html는 컨트롤러가 :

나는 두 가지보기가 exhisting 속성을 변경할 수있는 필터를 적용하는 것과 같은 일을 서비스 개체에 적용하고, 새 속성을 추가하고 요청 당 새 개체를 추가 할 수도 있습니다.

하지만 bio.html으로 전환하고 art.html으로 전환하면 어떻게됩니까? 요청을 다시 보내고 전체 페이지를 다시 렌더링합니다! 개체가 init()에 의해 다시 인스턴스화되기 때문에 그 사실을 알고 있습니다.

  • 뷰를 전환 할 때 페이지 상태를 어떻게 유지합니까?

  • 다른 컨트롤러가 공유하는 동일한 서비스 호출에 대해 캐시 된 요청을 어떻게 사용합니까? 내 경우

답변

0

지금까지 내가 (나는 단지 약 2 주 전에 각도로 일하기 시작했다) 그것을 이해의 Imgur 서비스는 일반적으로 상태를 저장하기에 좋은 장소로 간주됩니다.

, 나는 여러보기에서 사용되는 검색 지시문을 가지고 있지만보기 상태를 유지하려고하는 비슷한 상황이 있습니다. 따라서 지시문은 자체 상태를 유지하는 서비스를 사용합니다. 마지막 질의 수행, 서버가 반환 한 마지막 결과 목록 등입니다. 지시문의 link 함수가 호출되면 해당 값으로 범위를 초기화합니다.

// service 
myApp.service('SearchService', function(...) { 
    var previousQuery = null; 
    var previousResults = []; 

    this.getPreviousQuery = function() { return previousQuery; }; 
    this.getPreviousResults = function() { return previousResults; }; 

    this.performSearch = function(query) { 
    previousQuery = query; 
    ... 
    }; 
}); 

// directive (but could just as well have been a controller) 
myApp.directive('mySearchForm', function(..., SearchService) { 
    return { 
    ... 
    link : function($scope, $element, $attrs) { 
     $scope.query   = SearchService.getPreviousQuery(); 
     $scope.searchResults = SearchService.getPreviousResults(); 
     ... 
    } 
    }; 
}); 

그러나 내가 말했듯이, 나는 이것이 가장 좋은 방법 인 경우 각도 초보자 그렇게 모르는거야이 같이 보입니다

. 또한 저장 및 검색 (예 : 검색 결과 목록에 대한 스크롤 위치와 같은)과 내가 만족스럽게 해결할 수없는 (일부 해커를 통해서만 가능) 다른 '상태'조각이 있습니다.

서비스는 싱글 톤 클래스이므로 한 번 인스턴스화한다고 생각하기 때문에 상태를 저장하는 데는 좋은 장소 인 것 같습니다. 상태를 저장하는 서비스가 없거나 이상하게 생각하면 $cacheFactory (당신이 언급 한 것)도 옵션입니다. 여기에 jsfiddle이있어 저장 및 검색 방법을 이해하는 데 도움이되었습니다.

관련 문제