Angular，$ route.current返回undefined，但$ route有一个.current属性

Question

我有一个控制器：

app.controller('NavbarController', ['$scope', '$route', function($scope, $route) {
   console.log($route);
   console.log($route.current)
}]);

但是当我尝试使用$route.current时，我得到了未定义的内容，我不知道为什么当我console.log($route)

时，$ route有了这个问题

我有

.when('/', {
      templateUrl: '/home',
      controller: 'HomeController',
      activeTab: 'home'
    }).

我需要访问$route.current.$$route.activeTab所以我可以获取变量并设置适当的类。

完全控制器：

var app = angular.module('PugIt', ['ngRoute', 'ui.bootstrap'])

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/home',
      controller: 'HomeController',
      activeTab: 'home'
    }).
    when('/help', {
      templateUrl: '/help',
      controller: 'HelpController',
      activeTab: 'help'
    }).
    when('/donate', {
      templateUrl: '/donate',
      controller: 'DonateController',
      activeTab: 'donate'
    }).
    when('/server', {
      templateUrl: '/server',
      controller: 'ServerController',
      activeTab: 'server'
    }).
    when('/server/new', {
      templateUrl: '/server/new',
      controller: 'NewServerController',
      activeTab: 'serverNew'
    }).
    otherwise({
      redirectTo: '/'
    });
});

app.controller('HomeController', ['$scope', '$route', function($scope, $route) {

}]);

app.controller('HelpController', ['$scope', '$route', function($scope, $route) {

}]);

app.controller('DonateController', ['$scope', '$route', function($scope, $route) {

}]);

app.controller('ServerController', ['$scope', '$route', function($scope, $route) {

}]);

app.controller('NewServerController', ['$scope', '$route', function($scope, $route) {
}]);

app.controller('NavbarController', function($scope, $rootScope) {
  $route.activeTab = $route.current.$$route.activeTab;
});

然后将活动类设置为：

 // Navbar
    <div ng-controller="NavbarController">
        <li ng-class="{'active': activeTab == 'home'}"><a href="#/">Home</a></li>
    </div>
    // End of Navbar
    <div ng-view></div>

Answer 1

由于您需要跟踪路线，因此您绝对可以$watch进行更改：

.controller('NavbarController', function($scope, $route) {
   $scope.$route = $route;
   $scope.$watch("$route.current.$$route.activeTab", function(v){
     $scope.activeTab = v;
   }
});

但这会造成不必要的$watch。这不是太糟糕，因为它只有一个，但是听一个$routeChangeSuccess事件会更清楚：

.controller('NavbarController', function($scope, $route) {
   $scope.$route = $route;
   $scope.$on("$routeChangeSuccess", function(event, current, previous){
     $scope.activeTab = current.$$route.activeTab;
   }
});

Answer 2

当加载NavController时，很可能没有设置当前路由。

您可以在NavController中执行的操作是关注$route.current，以及 当它被设置\更改时，在监视处理程序中实现逻辑

$scope.$watch(function() {
   return $route.current;
},function(newValue,oldValue) {
    //implement logic here
});