Saving $ scope when switching state using ui-router

Question

I am creating an AngularJS tutorial application where I need to fill in the training data from the service and show it in three panels in the user interface. The first panel contains a list of topics, the second contains a list of subtopics, and the third contains data.

initially, when we did not select any topics, the service should return subtopics from 1 topic and data from the 1st subtopic.

While you click on any other subtopic, the service should return data for the subtopic. But as soon as the state is changed, the controller receives a reinstitution and loses data from the list of topics / subtopics that we initially displayed in the user interface.

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

a possible solution is when we click on any part of the subtopic, we should overpopulate the vertex / smudge data somewhere from localstorage or sessionStorage and combine it with the service data, which will have the desired result.

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

Answer 1

As you well mentioned, localstorage is always well suited for storing data. I personally prefer using a model $rootscopeto pass data around 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);
}]);

Answer 2

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

Here is a similar question.