如何在控制器內的標題導航指令內添加活動類？

由於我的應用程序有幾個頁面重複的導航菜單，我爲它做了一個指令。現在，.active類不再適用於當前頁面。我是否需要將控制器放入指令中？如何在控制器內的標題導航指令內添加活動類？

雖然不夠優雅，但這是我的代碼。謝謝。

page.html中

<div class="app-container"> 
    <div class="header clearfix"> 
    <div ng-controller="NavmenuCtrl"> 
     <nav-menu></nav-menu> 
    </div><!-- END NavmenuCtrl --> 
    </div><!-- /header --> 
<div class="container"></div> 
</div><!-- /app-container -->

navmenu指令

'use strict'; 

var app = angular.module('tempApp'); 

app.controller('NavmenuCtrl', function ($scope, $route) { 
    $scope.navMenuState = function($scope) { 
     $scope.navState = $route.current.navState; 
    }; 
}); 
app.directive('navMenu', function($route) { 
return { 
    scope: {}, 
    restrict: 'E', 
    replace: true, 
    templateUrl: 'views/partials/navmenu.html', 
    link: function navMenuState(scope, element, attrs, controller){ 
     // Watch for the $location 
     scope.$watch(function() { 
     // do I need a scope.$watch? 
    } 
    }; 
});

navmenu.html局部

<div> 
<div class="nav-container"> 
<ul class="navbar"> 
    <li class="col-xs-5" ng-class="{ active:route.current.navState === 'pg1Active' }"> 
    <a href="/#/pg1/"> 
     <img src="images/icon1.png" class="center-block"> 
    </a> 
    </li> 
    <li class="col-xs-5" ng-class="{ active:route.current.navState === 'pg2Active' }"> 
    <a href="/#/pg2"> 
     <img src="images/icon2.png" class="center-block"> 
    </a> 
    </li> 
</ul><!-- /.navbar --> 
<div class="overflow-menu pull-right dropdown" ng-controller="NavDropdownCtrl"> 
    <a class="dropdown-toggle"> 
    <img ng-src="images/icon3.png"> 
    </a> 
    <ul class="dropdown-menu"> 
    <li ng-repeat="name in MenuItems"> 
     <h4> 
     <a ng-href="#/{{ name | lowercase }}/"> 
      {{name}} 
     </a> 
     </h4> 
    </li> 
    </ul> 
</div><!-- /.overflow-menu --> 
</div><!-- /.nav-container --> 
</div>

個app.js

'use strict'; 

angular.module('tempApp', [ 
... 
]) 
.config(function ($routeProvider) { 
$routeProvider 
.when('/pg1/', { 
    templateUrl: 'views/pg1.html', 
    controller: 'MainCtrl', 
    navState: 'pg1Active' 
}) 
.when('/pg2/', 
    { 
    templateUrl: 'views/pg2.html', 
    controller: 'MainCtrl', 
    navState: 'pg2Active' 
    })

我還發現這些相關鏈接：

來源

2014-03-31 Danger14

您需要將$ location服務注入您的指令並檢查那裏的路線。 –

您需要將$ location服務注入您的指令並檢查那裏的路由。

來源

2014-04-01 00:32:09

如何在控制器內的標題導航指令內添加活動類？

回答

相關問題