Javascript AngularJs：有状态客户端路由

以下是我为提问而创建的演示，以及所需的内联代码：

宽度：100%；'class='nav nav list bs docs sidenav'>



​
函数RootCtrl（$scope，$routeParams）{
$scope.sidebar={
templateId:'侧栏'，
selectedItemId:$routeParams.navItemId
};
}
RootCtrl.$inject=['$scope'，'$routeParams']；
angular.module（'main'，[]）。
配置（['$routeProvider'，函数（$routeProvider）{
$routeProvider。
当（“/：navItemId”{
templateUrl:'root.html'，
控制器：RootCtrl
}).
否则（{重定向到：'/1'}）；
}]).
指令（'list'，函数（）{
返回{
限制：'E'，
替换：正确，
范围：{
“templateId”：“=”，
“selectedItemId”：“=”
}, 
模板：“”，
控制器：函数（$scope、$element、$attrs）{
$scope.templateUrl=$scope.templateId+'.html'；
$scope.data=[
{'id'：'1'，文本：'lorem ipsum'}，
{'id'：'2'，文本：'dolor sit amet'}，
];
}
};
});​

这是我一直在开发的应用程序的一小部分，但它清楚地显示了它在做什么。页面中有导航菜单，菜单项是指向哈希的链接，该哈希由angular.js routing（初始化根控制器）处理，等等，这很难描述，但代码示例清楚地显示了它。 问题是，每次单击导航菜单项时，整个页面内容都会重新呈现—路由是无状态的，它对以前的状态一无所知。我希望通过在用户仅在菜单项（或浏览器历史记录）之间导航时重新使用导航菜单数据/模板呈现结果来避免这种情况。可能吗？我肯定是的，只是想看看有没有人有好主意。谢谢

更新： 我发现了一些可能对我有帮助的东西：

---

我会将导航菜单放在ng view之外（这样它就不会重新渲染），但使用ng类和location.path（）来区分当前选定的项目。例如：

<div ng-controller="navCtrl">
  <ul ...>
    <li ng-repeat='item in navData' ng-class="{active:isActiveRoute(item.id)}">
    ...
  </ul>
</div>
<div ng-view></div>

---

我会将导航菜单放在ng view之外（这样它就不会重新渲染），但使用ng类和location.path（）来区分当前选定的项目。例如：

<div ng-controller="navCtrl">
  <ul ...>
    <li ng-repeat='item in navData' ng-class="{active:isActiveRoute(item.id)}">
    ...
  </ul>
</div>
<div ng-view></div>

---

我尝试单击JSFIDLE中的侧栏菜单，但它似乎没有被重新渲染。而且，我试着点击浏览器的“向前”“向后”历史按钮，它也在工作。你解决问题了吗？或者您正面临其他问题？它将被重新渲染。要观察这一点，请在$scope.templateUrl=$scope.templateId+'.html'中设置断点；然后开始导航。您将看到，在每个项目单击/浏览历史记录后，代码停止在该行中，页面在停止时为空，然后您继续执行，页面被重新呈现。我尝试单击JSFIDLE中的侧栏菜单，它似乎没有被重新呈现。而且，我试着点击浏览器的“向前”“向后”历史按钮，它也在工作。你解决问题了吗？或者您正面临其他问题？它将被重新渲染。要观察这一点，请在$scope.templateUrl=$scope.templateId+'.html'中设置断点；然后开始导航。您将看到，在每个项目单击/浏览历史记录后，代码停止在该行中，页面在停止时为空，然后继续执行，页面将重新呈现。

$scope.navData = [
  {'id':'1', text:'lorem ipsum'},
  {'id':'2', text:'dolor sit amet'},
];
$scope.isActiveRoute = function(route) {
   return '/' + route === $location.path();
};