ng-class基于ng-repeat突出显示活动菜单项。 AngularJS

Question

我有一个基于以下示例的菜单：

 <nav  data-ng-controller="menuContrl" class="menuItem">
     <a  data-ng-class='{active:isActive("/{{item.path}}")}' data-ng-repeat="item in menu" href="#/{{item.path}}">
         <span>{{item.title}}</span>
     </a>
 </nav>

item是一个对象，包含菜单项信息。以下是指令和控制器的JavaScript代码：

var app = angular.module("coolApp",[]);

function menuContrl($scope,$location){
    $scope.menu=menu;
    $scope.isActive = function(path){
        return ($location.path()==path)
    } 
}

问题是ng-class在页面呈现期间只将class设置为active一次，但是当您点击菜单项时，没有任何事情发生。我想这是因为菜单本身没有重新加载，我只是更改<div>内的数据。那么如何在不重新加载整个页面的情况下使其工作呢？

Answer 1

试试这个： - http://jsfiddle.net/uDPHL/146/

此问题存在于旧版angular js Reference 中，问题在升级到angular js 1.2.0版本后得到解决。

<强> JS： -

var navList = angular.module('navList', []);    

navList.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {

    $scope.navLinks = [{
        Title: 'home',
        LinkText: 'Home',
    }, {
        Title: 'about',
        LinkText: 'About Us'
    }, {
        Title: 'contact',
        LinkText: 'Contact Us'
    }];

    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        return page === currentRoute ? 'active' : '';
    };   

}]);

<强> HTML： -

<div class="well sidebar-nav" ng-app="navList">
    <ul class="nav nav-list" ng-controller="navCtrl">
        <li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')"> <a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a> 
        </li>
    </ul>
</div>

Answer 2

我发现如果你去的话会更容易：

<li ng-repeat="i in mainMenu" ng-class="{'active':i.path == path}">

然后你可以改变控制器中的$ scope.path。

Answer 3

` App.directive（'activeLink'，['$ location'，函数（位置）{     返回{         限制：'A'，         link：function（scope，element，attrs，controller）{

        scope.$watch('location.path()', function (newPath) {
            var clazz = attrs.activeLink;
            var path = attrs.ngHref;
            path.replace(/%20/g, " ")
            path = path.substring(1); //hack because path does bot return including hashbang
            scope.location = location;
            if (path === newPath) {
                element.parent('li').addClass(clazz);
            } else {
                element.parent('li').removeClass(clazz);
            }
        });
    }
}

}]）; ` 你可以使用这个dirctive

html Ex：

<li class="sidebarli"> <a ng-href="#/{{a.name}}/{{b.name}}/abc" active-link="active" class=""> <span> <i class="icon-credit-card" aria-hidden="true"></i><span class="ml15">Tasks</span> </span> </a> </li>

Answer 4

＆＃13;

＆＃13;

//app.run
App.run(["$rootScope", "$state", "$stateParams",function ($rootScope, $state, $stateParams) {
        // Set reference to access them from any scope
        $rootScope.$route = $state;
}]);
        

// app.config
        $stateProvider
            .state('admin', {
                url: '/admin/',
                templateUrl: 'app/admin/admin.html',
                controller: 'AdminController',
            })
            .state('admin.dashboard', {
                url: 'dashboard',
                title: 'Dashboard',
                activetab: 'dashboard',
                controller: 'DashboardController',
                templateUrl: 'app/admin/dashboard.html',

            })
            .state('admin.view1', {
                url: 'view1',
                title: 'view1',
                activetab: 'view1',
                controller: 'view1Controller',
                templateUrl: 'app/admin/view1.html',
               
            })
            .state('admin.view2', {
                url: 'view2',
                title: 'view2',
                activetab: 'view2',
                controller: 'View2Controller',
                templateUrl: 'app/admin/view2.html',
            });

＆＃13;

<li class="h4" ng-class="{'active': $route.current.activetab == 'dashboard'}">
                        <a>Dashboard</a>
                    </li>
                    <li class="h4" ng-class="{'active': $route.current.activetab == 'view1'}">
                        <a>view1</a>
                    </li>
                    <li class="h4" ng-class="{'active': $route.current.activetab == 'view2'}">
                        <a active-link="active">view2</a>
                    </li>

＆＃13;

＆＃13;

＆＃13;