AngularJs活动导航项目的问题

Question

我有看法：

<ul class="nav nav-pills" ng-controller="MenuItemCtrl as vm"> 
     <li ng-repeat="item in names" class="col-lg-2 col-md-2 col-sm-12 col-xs-12" ng-click="select($index)" ng-class="{active: $index == selected}"> 
      <a ng-show="{{item.up===true}}" href="#{{item.link}}">{{item.name}}</a> 
     </li> 
    </ul> 

和控制器这样的：

$scope.names = [{ 
       name: "Main", 
       slug: "main", 
       active: true, 
       up:true, 
       inFooter:false, 
       link: "/" 
      }, { 
       name: "Pets", 
       slug: "pets", 
       active: false, 
       up:true, 
       link: "/pets" 
      }, { 
       name: "LDAdoption", 
       slug: "ldAdoption", 
       active: false, 
       inFooter:false, 
       up:true, 
       link: "/ldAdoption" 
      },{ 
       name: "Impressum", 
       slug: "impressum", 
       active: false, 
       up:false, 
       inFooter:true, 
       link: "/impressum" 
      }, { 
       name: "Be a volunteer", 
       slug: "volunteer", 
       active: false, 
       inFooter:true, 
       up:false, 
       link: "/volunteer" 
      }, { 
       name: "Contact", 
       slug: "contact", 
       active: false, 
       up:true, 
       inFooter:true, 
       link: "/contact" 
      }]; 
      $scope.selected = 0; 
     $scope.select= function(item) { 
      $scope.selected = item; 
    }; 

     $scope.isActive = function(item) { 
       return $scope.selected === item; 
      }; 

我不明白为什么活动状态不保持，如果我刷新我的网页。我与ng-route一起工作，一切都很好，只是活动状态工作错了。你能帮我吗？谢谢！

Answer 1

在您的控制器启动时，您应该以某种方式获取当前路线，并根据此路线选择特定项目。

例如，您可以slug字段添加到您的路线：

$routeProvider. 
    when('/pets', { 
     templateUrl: '...', 
     controller: /*...*/, 
     slug: 'pets' 
    }) /* ... */; 

，然后读取它在你的控制器：

function yourController($scope, $routeParams) { 
    /*...*/ 
    var selectedSlug = $routeParams.slug; 
    if (selectedSlug) { 
     $scope.selected = /* find item by selected slug */ 
    } 
} 

Answer 2

添加 '塞' 到routeParams

$routeProvider. 
when('/pageUrl/:slug', { 
    templateUrl: viewUrl, 
    controller: someController 
}); 

In Controller

.controller('someController', function ($scope, $routeParams, $location) { 
    if ($routeParams.slug) { 
     $scope.selected = $routeParams.slug 
    } 

    $scope.select= function(slug) { 
     $location.path('/pageUrl/' + slug); 
    }; 

}) 

鉴于：

<ul class="nav nav-pills" ng-controller="MenuItemCtrl as vm"> 
    <li ng-repeat="item in names" class="col-lg-2 col-md-2 col-sm-12 col-xs-12" ng-click="select(item.slug)" ng-show="{{item.up===true}}" ng-class="{active: item.slug == selected}"> 
     <a href="javascript:void(0)">{{item.name}}</a> 
    </li> 
</ul>