我有一个控制器显示页面导航菜单。菜单有一系列的项目,每个项目都有标题和链接。我还在每个项目上设置一个标志,指示是否显示相关页面:
module.controller('MenuContr',[ /******/ '$scope','$location',function ($scope,$location) { $scope.items = [ {text: 'page 0',href: '#/page-0',current: $location.path() === '/page-0'},{text: 'page 1',href: '#/page-1',current: $location.path() === '/page-1'} ];
在我的模板中:
<ul class="menu" ng-controller="MenuContr" ng-cloak> <li ng-repeat="item in items" ng-switch on="item.current"> <span class="current" ng-switch-when="true">{{item.text}}</span> <a ng-switch-default ng-href="{{item.href}}">{{item.text}}</a> </li> </ul>
我需要能够在位置更改时更新菜单,如何完成?有可以订阅的活动吗?
编辑:除了在我的路由中定义的控制器之外,还使用此控制器,并且将上述模板放在包含ng-view指令的元素之上。
回答我自己的问题,在我的MenuContr中:
$scope.$on('$routeChangeSuccess',function () { var items = $scope.items; var path = $location.path(); for (var i = 0; i < items.length; i++) { var item = items[i]; var href = item['href']; item['current'] = !!href && href.substring(1) === path; } });