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

将“slug”添加到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>

AngularJs活动导航项问题

2 个答案: