Question

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

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

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

请参考http://embed.plnkr.co/v16rd5v1IjB14btfY7PQ/

上的POC

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

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

Answer 1

您可以将数据存储在服务中，在状态更改后不会重置。

Here is类似的问题。

Answer 2

正如您提到的那样，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);
}]);

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

2 个答案: