나는 각도를 배우고 navbar 메뉴를 만들고 현재 페이지를 기반으로 '활성'클래스를 설정하려고합니다. index.html을 활성 클래스 기반 선택된 메뉴

<html lang="en" data-ng-app="Afe" class="no-js"> 
    <head> 
     <!-- code omitted.. --> 
    </head> 
    <body> 
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container-fluid"> 
       <div class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav" data-ng-init="activeMenu='AfeCoverPage'"> 
         <li data-ng-class="{active: activeMenu=='AfeCoverPage'}" data-ng-click="activeMenu='AfeCoverPage'"><a href="#/AfeCoverPage">AFE Cover Page</a></li> 
         <li data-ng-class="{active: activeMenu=='AfeCostEstimate'}" data-ng-click="activeMenu='AfeCostEstimate'"><a href="#/AfeCostEstimate">AFE Cost Estimate</a></li> 
         <li data-ng-class="{active: activeMenu=='AfeVariance'}" data-ng-click="activeMenu='AfeVariance'"><a href="#/AfeVariance">AFE Variance</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
     <div data-ng-view=""></div> 

     <!-- code omitted.. --> 
     <script src="js/app.js"></script> 
     <script src="js/controllers.js"></script> 
    </body> 
</html>

는 app.js

angular.module('Afe', ['ngRoute', 'Afe.controllers']). 
    config(['$routeProvider', function ($routeProvider) { 
     $routeProvider.when('/AfeCoverPage', { templateUrl: 'partials/AfeCoverPage.html', controller: 'AfeCoverPageCtrl' }); 
     $routeProvider.when('/AfeCostEstimate', { templateUrl: 'partials/AfeCostEstimate.html', controller: 'AfeCostEstimateCtrl' }); 
     $routeProvider.when('/AfeVariance', { templateUrl: 'partials/AfeVariance.html', controller: 'AfeVarianceCtrl' }); 
     $routeProvider.otherwise({ redirectTo: '/AfeCoverPage' }); 
    }]);

controllers.js

현재

angular.module('Afe.controllers', []). 
    controller('GlobalCtrl', ['$scope', function ($scope) { 
    }]). 
    controller('AfeCoverPageCtrl', ['$scope', function ($scope) { 
    }]). 
    controller('AfeCostEstimateCtrl', ['$scope', function ($scope) { 
    }]). 
    controller('AfeVarianceCtrl', ['$scope', function ($scope) { 
    }]);

가 작동하고, AFE 커버 페이지 메뉴를 클릭하면 <li> 요소 것 'active'클래스가 있지만 ng-click을 사용하는 것이 올바른지 확실하지 않습니다. 코드가 중복 된 것 같습니다. 누구든지 저에게 최선의 방법을 보여줄 수 있습니까?

출처

2014-07-01 Yuliam Chandra

$ location 서비스와 ng-class 지시문에서 현재 경로와 일치하는 경우 부울을 반환하는 함수를 사용할 수 있습니다. 컨트롤러와

<div class="collapse navbar-collapse" ng-controller="MenuController"> 
    <ul class="nav navbar-nav"> 
     <li data-ng-class="{active: isActive('/AfeCoverPage')}"><a href="#/AfeCoverPage">AFE Cover Page</a></li> 
     <li data-ng-class="{active: isActive('/AfeCostEstimate')}"><a href="#/AfeCostEstimate">AFE Cost Estimate</a></li> 
     <li data-ng-class="{active: isActive('/AfeVariance')}"><a href="#/AfeVariance">AFE Variance</a></li> 
    </ul> 
</div>

.controller('MenuController', function ($scope, $location) { 
    $scope.isActive = function (path) { 
     return $location.path() === path; 
    } 
});

출처

2014-07-01 05:00:29 adamK

들으이 내가 .... 코드에 대한 감사를 –

좋은 솔루션이 필요한 것입니다 –

활성 클래스 기반 선택된 메뉴

는 app.js

controllers.js

답변

관련 문제