angularjs는 경로를 통해 범위 변수를 유지합니다.

Question

경로를 통해 모델을 유지 관리하려면 어떻게해야합니까? 예를 들어 홈 페이지에로드 된 프로필 목록이 있습니다. 홈 페이지에는 기본적으로 더 많은 프로파일을로드하는 "더 많은로드"작업이 포함되어 있으며 기본적으로 데이터를 모델에 푸시합니다. 특정 프로필을 클릭하면 해당 프로필의 상세보기가 경로를 통해 활성화됩니다. 상세보기에는 사용자를 다시 홈 페이지로 리디렉션하는 뒤로 버튼이 있습니다. 홈 페이지로 다시 라우팅하면 "더 많은로드"작업에 의해로드 된 데이터 (프로필)가 손실됩니다. 나는 "더로드"와 모델을 유지하기 위해 필요한 데이터

을 앞에 추가 아래 코드 당신은 그렇게 할 AngularJS service을 사용할 수 있습니다

/* Controllers */ 
var profileControllers = angular.module('profileControllers', ['profileServices']) 


profileControllers.controller('profileListCtrl', ['$scope','$location', 'Profile','$http', 
    function($scope,$location, Profile,$http) { 
    $scope.Profiles = Profile.query(function(){ 

     if($scope.Profiles.length < 3) { 
        $('#load_more_main_page').hide(); 
       } 
     }); 
    $scope.orderProp = 'popular'; 
    $scope.response=[]; 

    //LOADMORE 
    $scope.loadmore=function() 
    { 

     $http.get('profiles/profiles.php?profile_index='+$('#item-list .sub-item').length).success(function(response){ 
      if(response) { 
       var reponseLength = response.length; 
       if(reponseLength > 1) { 
        $.each(response,function(index,item) { 


         $scope.Profiles.push({ 
              UID: response[index].UID, 
              id: response[index].id, 
              popular: response[index].popular, 
              imageUrl: response[index].imageUrl, 
              name: response[index].name, 
              tags: response[index].tags, 
              category: response[index].category 
             }); 

         }); 
       } 
       if(reponseLength < 3) { 
        $('#load_more_main_page').hide(); 
       } 
      } 

     }); 


    } 

    }]); 





    /* App Module */ 

var profileApp = angular.module('profileApp', [ 
    'ngRoute', 
    'profileControllers', 
    'profileServices', 
]); 



profileApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/profiles', { 
     templateUrl: 'partials/profile-list.html', 
     controller: 'profileListCtrl', 
     resolve: { 
      deps: function ($q, $rootScope) { 
       var deferred = $q.defer(); 
       var dependencies = ['js/sort.js']; 
       $script(dependencies, function() { 
        $rootScope.$apply(function() { 
         deferred.resolve(); 
        }); 
       }); 
       return deferred.promise; 
      } 
     } 
     }). 
     when('/profiles/:profileId', { 
     templateUrl: 'partials/profile-detail.html', 
     controller: 'profileDetailCtrl', 

     }). 
     when('/profiles/cat/:category', { 
     templateUrl: 'partials/profile-list-category.html', 
     controller: 'profileCategoryListCtrl', 

     }). 
     when('/create/', { 
     templateUrl: 'partials/profile-create.html', 
     controller: 'profileCreateCtrl', 
     css: ['css/createprofile.css','css/jquery-ui-1.10.4.custom.min.css','css/spectrum.css'], 

     }). 
     otherwise({ 
     redirectTo: '/profiles' 
     }); 
    }]); 

Answer 1

을 사용합니다. 서비스는 싱글 톤이며 경로 변경을 통해 데이터를 저장할 수 있습니다.

myModule.factory('serviceId', function() { 
    var shinyNewServiceInstance = { 
    // your data here 
    }; 
    return shinyNewServiceInstance; 
}); 

그리고 컨트롤러에서 사용 : 각도에서 controller가 싱글 아니기 때문에

controller('MyController', function($scope, serviceId) { 
    // use serviceId here 
}); 

Answer 2

당신은 $scope 변수를 잃어버린 것입니다. 다시 탐색 할 때 생성 된 새 인스턴스가 있습니다.

경로 변경 사이에 모든 종류의 변수를 저장하려면 service을 만들어야합니다.

Answer 3

서비스는 일반적으로보기간에 데이터를 공유하는 데 일반적으로 사용되는 방법입니다. 이것이 싱글 톤이기 때문에 라우트 변경시 다시 생성되지 않기 때문에 데이터를 거기에 "캐싱"하여 서비스가 주입되는 모든 컨트롤러에서 데이터를 검색 할 수 있습니다.

이 질문의 두 번째 대답은 코드로 설명합니다

Same data in multiple views using AngularJS

Answer 4

는 각도 서비스를 생성하고 다른 경로 주위를 전달합니다. 여기

자세한 대답 - 당신이보기 상태를 유지하는 UI 라우터를 필요로 같은 https://stackoverflow.com/a/16559855/907388