20

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

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指令的元素之上。

4

2 回答 2

21

回答我自己的问题，在我的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;
            }
        });
于 2012-11-17T00:30:02.680 回答
0

您是否会在路线更改时使用同一个控制器？是您在 AppsModule.config 的 $routeProvider 中定义的方式吗？如果你想要额外的过滤，你可以将 $routeParams 传递给同一个控制器。

您已经在控制器启动时初始化了对象。因此，一旦更改链接，将调用相同的控制器，您无需执行任何其他操作。根据选择的路线，项目将得到更新。

于 2012-11-17T11:18:29.337 回答