AngularJS技术疑问：能否用双控制器实现导航栏选中状态更新？

刚接触AngularJS时，确实容易在路由和导航状态同步上犯懵，其实不用给导航栏单独加控制器，利用ngRoute本身的特性就能轻松搞定！

核心思路 #

导航栏的选中状态本质是和当前路由路径绑定的，我们只需要把当前路由的路径暴露给导航栏所在的作用域，然后用ng-class动态切换选中类就行。

具体实现步骤 #

1. 在主控制器中监听路由变化
   首先，在你的根控制器（比如绑定到ng-app的那个控制器）里，监听路由切换成功的事件，把当前路由的路径存到$rootScope里（这样全局都能访问到）：

   angular.module('myApp', ['ngRoute'])
     .controller('MainController', function($rootScope, $route) {
       // 监听路由切换完成事件
       $rootScope.$on('$routeChangeSuccess', function() {
         // 把当前路由的原始路径存到全局作用域
         $rootScope.currentPath = $route.current.originalPath;
       });
     });
   

2. 用ng-class动态设置选中状态
   回到你的导航栏HTML，给每个导航项加上ng-class，判断当前路径是否和该项的路由匹配，匹配时添加active类（这里假设你用的是Bootstrap的active类，你也可以换成自己的样式类）：

   <!-- 导航栏部分 -->
   <ul class="nav nav-tabs">
     <li ng-class="{active: currentPath === '/home'}">
       <a href="#!/home">首页</a>
     </li>
     <li ng-class="{active: currentPath === '/about'}">
       <a href="#!/about">关于我们</a>
     </li>
     <li ng-class="{active: currentPath === '/contact'}">
       <a href="#!/contact">联系我们</a>
     </li>
   </ul>
   
   <!-- ngView部分 -->
   <div ng-view></div>
   

3. 确保路由配置正确
   别忘了你的路由配置要和导航项的路径对应，比如：

   angular.module('myApp')
     .config(function($routeProvider) {
       $routeProvider
         .when('/home', {
           templateUrl: 'templates/home.html',
           controller: 'HomeController'
         })
         .when('/about', {
           templateUrl: 'templates/about.html',
           controller: 'AboutController'
         })
         .when('/contact', {
           templateUrl: 'templates/contact.html',
           controller: 'ContactController'
         })
         .otherwise({redirectTo: '/home'});
     });
   

为什么不用给导航栏单独加控制器？ #

因为导航栏的状态完全依赖于当前路由，而ngRoute已经在管理路由信息了。通过$rootScope共享当前路径，既能避免重复创建控制器，也能让状态同步逻辑更统一，符合AngularJS的数据绑定思想。

如果觉得用$rootScope不太舒服，也可以把currentPath存在主控制器的$scope里，只要导航栏在主控制器的作用域范围内就行，原理是一样的。

内容的提问来源于stack exchange，提问作者tonyjojo