javascript - 使用 ui-router 切换状态时保留 $scope

Question

我正在为教程创建 AngularJS 应用程序，我需要从服务中填充教程数据并将其显示在 UI 的三个面板中。第一个面板包含主题列表，第二个 - 子主题列表，第三个包含数据。

最初当我们没有选择任何主题时，服务应该返回第一个主题的子主题和第一个子主题的数据。

当您单击任何其他子主题时，服务应返回给定子主题的数据。但是一旦状态发生变化， Controller 就会重新实例化并丢失我们最初在 UI 上显示的主题/子主题列表的数据。

请参阅 http://embed.plnkr.co/v16rd5v1IjB14btfY7PQ/ 上的 POC

可能的解决方案 - 当我们点击任何子主题时，我们应该从 localstorage 或 sessionStorage 的某个地方过度填充顶部/子主题数据，并将其与将具有所需输出的服务数据合并。

有没有其他方法可以使用 Angular 实现 3 级动态导航？

Answer 1

正如您完美提到的，localstorage 始终是一种很好的数据存储方法。我个人更喜欢使用 $rootscope 模型在各州之间传递数据。

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);
}]);