Persisting $scope while switching state using ui-router

Question

I am creating AngularJS app for tutorials where I need to populate tutorial data from service and show it in three panels on UI. First panel contains list of Topics, 2nd - list of subtopics and 3rd one contains data.

initially when we haven't selected any topics, service should return subtopics of 1 topic and data of the 1st subtopic.

While you click on any other subtopic, then service should return the data for the give subtopic. But as soon as the state gets changed controller is getting re-instantiated and losing the data of topic/subtopic list which we initially shown on UI.

Please refer POC at http://embed.plnkr.co/v16rd5v1IjB14btfY7PQ/

possible solution - when we click on any of the subtopic, we should overpopulate tops/subtopics data somewhere from localstorage or sessionStorage and merge it with the service data which will have the desired output.

Is there any other way to implement 3 level dynamic navigation using Angular?

this may be helpful: http://stackoverflow.com/questions/27696612/how-do-i-share-scope-data-between-states-in-angularjs-ui-router — Vishal Rajole, Dec 23 '15 at 09:19

score 3 · Answer 1 · edited May 23 '17 at 12:32

3

You can store your data in service, it will not reset after state change.

Here is the similar question.

edited May 23 '17 at 12:32

Community

1
1

answered Dec 23 '15 at 09:21

Martin Schulz

582
1
3
13

score 3 · Accepted Answer · answered Dec 23 '15 at 09:37

As you perfectly mentioned localstorage is always a good to go method for data storage. I personally prefer using a $rootscope model to pass data around the states.

app.controller('topicController', ['$scope','TopicProvider','$rootScope',function($scope,TopicProvider,$rootScope){

  var t = TopicProvider.get(function(tp){
    $scope.t = tp.topics;
    $scope.st = tp.subtopics;
    $scope.d = tp.data;
  });
  //pass data between the states
  $rootScope.dummyModel = "test";
}]);



app.controller('anotherController', ['$scope','TopicProvider','$rootScope',function($scope,TopicProvider,$rootScope){
  //get that model
  alert($rootScope.dummyModel);
}]);

Persisting $scope while switching state using ui-router

2 Answers2