Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularjs maintain the scope variable across routes

How do I maintain the model across routes. for eg I have a list of profiles loaded onto the home page. The home page also contains a "load more" action to load more profiles, basically pushing data to the model. On clicking of a specific profile, the detail-view for that profile is activated via routes. The detail view has a back button which redirects the user back to the home page. On routing back to the home page data(profiles) loaded by the "load more" action is lost. I need to maintain the model with the "load more" prepended data

Below is the code used

/* 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'
      });
  }]);
like image 424
melwyn pawar Avatar asked Apr 30 '14 21:04

melwyn pawar


2 Answers

A service is generally the accepted way to share data between views. Because it's a singleton and isn't regenerated on route change, you can "cache" data there and retrieve it from any controller that the service is injected into.

The second answer of this question explains it with code:

Same data in multiple views using AngularJS

like image 122
Sharondio Avatar answered Oct 08 '22 20:10

Sharondio


Create an Angular service and pass it around the different routes.

Detailed answer here - https://stackoverflow.com/a/16559855/907388

like image 1
pbojinov Avatar answered Oct 08 '22 19:10

pbojinov