AngularJs：有狀態的客戶端路由

這裏是我的提問，並內嵌代碼的要求創建的演示：http://jsfiddle.net/Gncja/1/AngularJs：有狀態的客戶端路由

<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路由處理的哈希，這很難描述，但代碼示例清楚地顯示了它。每次單擊導航菜單項時，整個頁面內容都會重新呈現，這個問題 - 路由是無狀態的，它對前一個狀態一無所知。當用戶只是在菜單項（或瀏覽器歷史記錄）之間導航時，我想通過重新使用導航菜單數據/模板渲染結果來避免這種情況。可能嗎？我相信這一點，只是想看看是否有人有好的想法。謝謝！

UPDATE： 我發現的東西，可能會幫助我： http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

來源

2012-11-18 sovo2014

我試着點擊的jsfiddle側欄菜單，它似乎並不被重新渲染。而且，我嘗試點擊瀏覽器「前進」「後退」歷史按鈕，它也在工作。你解決了這個問題嗎？或者您正面臨其他一些問題？ – venkat

它被重新渲染。注意在$ scope.templateUrl = $ scope.templateId +'.html';中設置斷點。一行代碼並開始導航。在每次點擊/瀏覽器歷史記錄後，您會看到代碼在該行停止，並且頁面在停止時刻爲空，然後繼續執行該頁面重新呈現。 – sovo2014

我會把導航菜單外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>

然後在navCtrl：

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

Fiddle

來源

2012-11-19 18:10:57

AngularJs：有狀態的客戶端路由

回答

相關問題