Question

以下是我根据要求询问此问题和内联代码而创建的演示：http://jsfiddle.net/Gncja/1/

<script type='text/ng-template' id='root.html'>
  <list template-id='sidebar.templateId' selected-item-id='sidebar.selectedItemId'></list>
</script>


<script type='text/ng-template' id='sidebar.html'>
<ul style='width:100%;' class='nav nav-list bs-docs-sidenav'>
  <li ng-repeat='item in data' ng-class="{active:item.id==selectedItemId}">
    <a ng-href='#/{{item.id}}'>
      <i class=icon-chevron-right></i>
      <span ng-bind='item.text'></span>
    </a>
  </li>
</ul>    
</script>

<body ng-app='main'>
  <div ng-view></div>
</body>

function RootCtrl($scope, $routeParams){
  $scope.sidebar = {
    templateId: 'sidebar',
    selectedItemId: $routeParams.navItemId
  };
}

RootCtrl.$inject = ['$scope','$routeParams'];

angular.module('main', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/:navItemId', {
        templateUrl: 'root.html',   
        controller: RootCtrl
      }).
      otherwise({redirectTo: '/1'});
}]).
directive('list', function(){
  return {
    restrict: 'E',
    replace: true,
    scope:{
      'templateId': '=',
      'selectedItemId':'='
    }, 
    template:'<ng-include src="templateUrl"></ng-include>',
    controller: function($scope, $element, $attrs){
      $scope.templateUrl = $scope.templateId + '.html';
      $scope.data = [
          {'id':'1', text:'lorem ipsum'},
          {'id':'2', text:'dolor sit amet'},
          ];

    }
  };
});

这是我一直在研究的应用程序的一小部分，但它清楚地显示了它正在做什么。页面中有导航菜单，菜单项是由angular.js路由处理的哈希的链接，初始化根控制器等，描述起来非常棘手，但代码示例清楚地显示了它。每次单击导航菜单项时，都会重新呈现整个页面内容的问题 - 路由是无状态的，并且它对之前的状态一无所知。当用户只在菜单项（或浏览器历史记录）之间导航时，我想通过重新使用导航菜单数据/模板渲染结果来避免这种情况。可能吗？我确信它是，只是想看看是否有人有好主意。谢谢！

更新我找到了可以帮助我的东西： http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Answer 1

我会将导航菜单放在ng-view之外（因此它不会重新渲染），但是使用ng-class和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>

然后在navCtrl中：

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

Fiddle

AngularJs：有状态客户端路由

1 个答案: