Angularjs 页面加载后展开li'；在安圭拉，人们并没有保持他们的状态

嗨，我正在使用angularjs开发一个门户。我有李的内部ul。我正在使用循环将数据绑定到li的。我的问题是，例如，我会在ul页面内点击一些li，相关数据可以正常工作，但如果我刷新页面，我将不会在页面加载前的相同li中。例如，我有下面的代码

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-if="project">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
    <a class="navbar-brand" ng-href="{{'#!/p/' + project.key + '/'}}"><img src="images/logo.png" /></a>
  </div>
  <div class="nav-heading pull-left" ng-bind="project.name"></div>
  <div ng-if="project.logoFile" class="client-logo pull-right"><img ng-src="{{project.logoFile.url}}"/></div>
  <!-- Top Menu Items -->
  <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav side-nav public">
      <li>
        <a ng-href="{{'#!/p/' + project.key + '/'}}"><img src="images/icons/visible.png"/> Project Overview</a>
      </li>
      <li>
        <a ng-href="{{'#!/p/' + project.key + '/procedure'}}"><img src="images/icons/recycle_sign.png"/> Procedure Overview</a>
      </li>
      <li ng-repeat="p in processMenu" bs-collapse data-start-collapsed="true">
        <a ng-href="{{'#!/p/' +project.key + '/process/' + p.id}}">
          <img ng-src="{{p.iconFileobj.url}}" ng-if="p.iconFileobj.url"/> {{p.name}}
          <i ng-if="p.children && p.children.length > 0" class="down-arrow fa fa-caret-down" bs-collapse-toggle
            ng-click="$event.preventDefault(); $event.stopPropagation()"></i>
        </a>
        <ul bs-collapse-target class="panel-collapse" ng-if="p.children && p.children.length > 0">
          <li ng-repeat="pr in p.children">
            <a ng-href="{{'#!/p/' +project.key + '/process/' + pr.id}}">
              <img ng-if="pr.iconFileobj.url" ng-src="{{pr.iconFileobj.url}}"/> {{pr.name}}
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
</nav>

<div id="page-wrapper" ng-if="project">
  <div class="container-fluid">
    <!-- Page Heading -->
    <div class="row">
      <div class="col-lg-12">
        <ol class="breadcrumb" ng-if="nav.breadcrumb && nav.breadcrumb.length > 0">
          <li ng-repeat="b in nav.breadcrumb" ng-class="{active: !b.href}">
            {{!b.href ? b.title : ''}}
            <a ng-href="{{b.href}}" ng-bind="b.title" ng-if="b.href"></a>
          </li>
        </ol>
      </div>
    </div>

    <div class="row" ui-view=""></div>
  </div>
  <!-- /.container-fluid -->
  <div class="footer-copyright">&copy; 2017 All rights reserved to Norconsult Telematics</div>
</div>
<a ng-if="project" href="javascript:void(0)" ng-click="togglePageMenu()" class="page-link am-slide" ng-class="{active: pageMenuShown}">i</a>
<ul ng-if="pageList" class="page-menu am-slide-right" ng-show="pageMenuShown">
  <li ng-repeat="p in pageList">
    <a ng-href="{{'#!/p/' + project.key + '/page/' + p.id}}">
      <img ng-if="p.fileob" ng-src="{{p.fileob.url}}"/> <br/>
      {{p.name}}
    </a>
  </li>
</ul>

请调查一下

---

在上面的链接中，如果我点击allocate budjet，我将获得相应的数据，如果我点击f5，我将保留空白。任何帮助都将不胜感激。谢谢。

您如何保存数据？当您重新加载页面时，您将丢失瞬态数据（如用户以某种方式设置属性的对象），除非您将它们持久地写入某个位置，如本地存储、cookie或路由（url）。我遇到了一个类似的问题，我通过将信息写入URL而不是仅仅从服务获取信息（因为服务在重新初始化时被擦除）来解决它。谢谢。我是从api那里得到的。在页面加载时，我将调用api。问题不在于你从哪里得到它，而在于你把它放在哪里，以及当页面重新加载时你如何再次获取它。您是将数据放在任何持久的地方，还是将其保存在运行应用程序的内存中？当您刷新页面（浏览器刷新）时，您基本上会重新初始化整个页面。但是，假设你在某种对象中收集了数据，你可以将其写入cookie、本地存储（序列化为JSON，无论什么），然后你可以在页面重新加载时检查它，如果有任何内容，则将其加载到应用程序中并使用它。实际上，我正在尝试更改其他人编写的代码。我将粘贴控制器中的数据。顺便说一句，我说的数据不是您的API数据。您要保留的数据将允许您完全按照用户上次看到的方式重新构建页面。这可以简单到收集样式信息（比如隐藏/显示了哪些div）并暂时保存它。

(function(guiApp) {
  'use strict';

  guiApp.config(function($stateProvider) {
    $stateProvider.state('public.process', {
      url: '/process/:processId',
      templateUrl: 'views/public/process.html',
      controller: 'PublicProcessController',
    });
  });

  guiApp.controller('PublicProcessController', function($scope, $stateParams, AppConfig, processService) {
    $scope.setAtiveProcess($stateParams.processId);
    $scope.currentProcess = $scope.processList.filter(function(process) {
      return parseInt(process.id) === parseInt($stateParams.processId);
    })[0];

    if (!$scope.currentProcess) {
      return;
    }

    $scope.filteredTemplates = function(processId) {
      var templates = $scope.processTemplates.filter(function(templateWrapper) {
        return(processId == templateWrapper.processId);
      });

      return templates;
    };

    $scope.processTemplates = [];
    processService.getTemplates($scope.currentProcess.id).then(function(res) {
      var templates = res.data;

      templates.forEach(function(template) {
        template.filesObj.url = AppConfig.uploadsBaseUrl + template.filesObj.url;
        $scope.processTemplates.push({ processId: $scope.currentProcess.id, data: template });
      });
    });

    if($scope.currentProcess.children) {
      $scope.currentProcess.children.forEach(function(childProcess) {
        processService.getTemplates(childProcess.id).then(function(res) {
          var templates = res.data;

          templates.forEach(function(template) {
            template.filesObj.url = AppConfig.uploadsBaseUrl + template.filesObj.url;
            $scope.processTemplates.push({ processId: childProcess.id, data: template });
          });
        });
      });
    }

    $scope.settings = $scope.projectSettings.filter(function(item) {
      return item.level === $scope.currentProcess.level;
    })[0];

    $scope.level3Settings = $scope.projectSettings.filter(function(item) {
      return item.level === 3;
    })[0];


    $scope.setBreadcrumb([{ title: 'Project', href: '#!/p/' + $scope.project.key + '/' },
      { title: $scope.currentProcess.name }
    ]);

    $scope.test = function() {
    $scope.checkVal = !$scope.checkVal; // or false
    angular.element('#flowChartCheckbox').trigger('click');
  };
  });
})(window.guiApp);