gpt4 book ai didi

javascript - AngularJs:有状态的客户端路由

转载 作者:行者123 更新时间:2023-11-28 02:36:17 27 4
gpt4 key购买 nike

这是我为提出这个问题而创建的演示以及所要求的内联代码: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'},
];

}
};
});​

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

更新:我发现了一些可能对我有帮助的东西: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

最佳答案

我会将导航菜单放在 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

关于javascript - AngularJs:有状态的客户端路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13440876/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com