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-маршрутом, и все в порядке, просто работа не работает. Не могли бы вы мне помочь? Благодаря!

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

Контроллер

.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>