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;
            }
        });

Answer 2

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

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

如何检测位置变化

2 个答案: