1

この質問をするために作成したデモと、要求されたインライン コードを次に示します: 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

4

1 に答える 1

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

フィドル

于 2012-11-19T18:10:57.313 に答える