如何检测位置变化

Question

我有一个显示页面导航菜单的控制器.菜单包含一系列项目,每个项目都有标题和链接.我还在每个项目上设置了一个标志,指示当前是否显示相关页面:

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指令的元素上方.

Answer 1

回答我自己的问题,在我的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;
            }
        });