Question

由于我的应用程序有几页重复的导航菜单，我为它做了一个指令。现在，.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 partial

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

我还找到了这些相关链接：

Answer 1

您需要将$ location服务注入您的指令并检查那里的路由。

如何在控制器内部的头导航指令中添加活动类？

1 个答案: