AngularJSでアクティブなタブスタイルを設定する

私はこのようにAngularJSにルートを設定しています：

$routeProvider
    .when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
    .when('/lab', {templateUrl:'partials/lab', controller:widgetsController})

タブとしてスタイル設定されたトップバーにいくつかのリンクがあります。現在のテンプレートまたはURLに応じて、「アクティブ」クラスをタブに追加するにはどうすればよいですか？

URLに依存することなくこれを解決する方法は$routeProvider、次のように、構成中にすべてのパーシャルにカスタム属性を追加することです。

$routeProvider.
    when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: widgetsController,
        activetab: 'dashboard'
    }).
    when('/lab', {
        templateUrl: 'partials/lab.html',
        controller: widgetsController,
        activetab: 'lab'
    });

$routeコントローラーで公開する：

function widgetsController($scope, $route) {
    $scope.$route = $route;
}

active現在アクティブなタブに基づいてクラスを設定します。

<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>

これを行う1つの方法は、ngClassディレクティブと$ locationサービスを使用することです。あなたのテンプレートでは次のことができます：

ng-class="{active:isActive('/dashboard')}"

isActiveこのように定義されたスコープ内の関数はどこですか？

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

ここに完全なjsFiddleがあります：http ://jsfiddle.net/pkozlowski_opensource/KzAfG/

ng-class="{active:isActive('/dashboard')}"（多くのタブがある場合）各ナビゲーションタブで繰り返すのは面倒な場合があるため、このロジックは非常に単純なディレクティブの候補になる場合があります。

カスタムディレクティブを使用するというPavelのアドバイスに従い、次のバージョンは、routeConfigにペイロードを追加する必要がないバージョンで、超宣言的であり、slice()注意を向けているパスを変更するだけで、パスの任意のレベルに対応するように調整できます。 。

app.directive('detectActiveTab', function ($location) {
    return {
      link: function postLink(scope, element, attrs) {
        scope.$on("$routeChangeSuccess", function (event, current, previous) {
            /*  
                Designed for full re-usability at any path, any level, by using 
                data from attrs. Declare like this: 
                <li class="nav_tab">
                  <a href="#/home" detect-active-tab="1">HOME</a>
                </li> 
            */

            // This var grabs the tab-level off the attribute, or defaults to 1
            var pathLevel = attrs.detectActiveTab || 1,
            // This var finds what the path is at the level specified
                pathToCheck = $location.path().split('/')[pathLevel] || 
                  "current $location.path doesn't reach this level",
            // This var finds grabs the same level of the href attribute
                tabLink = attrs.href.split('/')[pathLevel] || 
                  "href doesn't include this level";
            // Above, we use the logical 'or' operator to provide a default value
            // in cases where 'undefined' would otherwise be returned.
            // This prevents cases where undefined===undefined, 
            // possibly causing multiple tabs to be 'active'.

            // now compare the two:
            if (pathToCheck === tabLink) {
              element.addClass("active");
            }
            else {
              element.removeClass("active");
            }
        });
      }
    };
  });

パス上にを$routeChangeSuccess配置するの$watchではなく、イベントをリッスンすることで目標を達成しています。私は、時計が各$digestサイクルで作動するように思うので、これはロジックがより頻繁に実行されるべきではないという信念の下で働きます。

ディレクティブ宣言でパスレベルの引数を渡して、呼び出します。これは、href属性と照合する現在の$ location.path（）のチャンクを指定します。

<li class="nav_tab"><a href="#/home" detect-active-tab="1">HOME</a></li>

したがって、タブがパスの基本レベルに反応する必要がある場合は、引数を「1」にします。したがって、location.path（）が "/ home"の場合、の "＃/ home"と一致しhrefます。パスの2番目のレベル、3番目、または11番目のレベルに反応するタブがある場合は、それに応じて調整します。この1以上のスライスは、インデックス0に存在するhref内の悪質な「＃」をバイパスします。

<a>要素がhref属性の存在を想定しているため、で呼び出すことが唯一の要件であり、現在のパスと比較します。ただし、またはで呼び出すことを好む場合は、親要素または子要素の読み取り/書き込みにかなり簡単に適応できます<li>。これは、pathLevel引数を変更するだけで多くのコンテキストで再利用できるためです。読み取る深さがロジックで想定されている場合、ナビゲーションの複数の部分で使用するディレクティブの複数のバージョンが必要になります。

編集3/18/14：ソリューションは一般化が不十分undefinedであり$location.path()、と要素のの両方に対して返される 'activeTab'の値の引数を定義した場合にアクティブになりますhref。理由：undefined === undefined。その状態を修正するために更新されました。

その作業中に、次のようなテンプレート構造を使用して、親要素で宣言できるバージョンがあったはずであることに気付きました。

<nav id="header_tabs" find-active-tab="1">
    <a href="#/home" class="nav_tab">HOME</a>
    <a href="#/finance" class="nav_tab">Finance</a>
    <a href="#/hr" class="nav_tab">Human Resources</a>
    <a href="#/quarterly" class="nav_tab">Quarterly</a>
</nav>

このバージョンはリモートでBootstrapスタイルのHTMLに似ていないことに注意してください。しかし、それはより近代的で、使用する要素が少ないので、私はそれに不慣れです。このバージョンのディレクティブと元のディレクティブは、依存関係として宣言できるドロップインモジュールとしてGithubで利用できるようになりました。誰かが実際にそれらを使用する場合、私はそれらをBower化できれば幸いです。

また、を含むブートストラップ互換バージョンが<li>必要な場合は、この元の投稿の後に出てきたと思われる angular-ui-bootstrap Tabsモジュールを使用できます。これはおそらくこれよりもさらに宣言的です。基本的なものについてはそれほど簡潔ではありませんが、無効化されたタブや、アクティブ化および非アクティブ化時に起動する宣言型イベントなど、いくつかの追加オプションを提供します。

@ rob-juurlink私はあなたのソリューションを少し改善しました：

アクティブなタブを必要とする各ルートの代わりに; そして、各コントローラーでアクティブなタブを設定する必要があります。

var App = angular.module('App',[]);
App.config(['$routeProvider', function($routeProvider){
  $routeProvider.
  when('/dashboard', {
    templateUrl: 'partials/dashboard.html',
    controller: Ctrl1
  }).
  when('/lab', {
    templateUrl: 'partials/lab.html',
    controller: Ctrl2
  });
}]).run(['$rootScope', '$location', function($rootScope, $location){
   var path = function() { return $location.path();};
   $rootScope.$watch(path, function(newVal, oldVal){
     $rootScope.activetab = newVal;
   });
}]);

そして、HTMLは次のようになります。activetabは、そのルートに関連する単なるURLです。これにより、各コントローラーにコードを追加する必要がなくなります（これらが使用される唯一の理由である場合は、$ routeや$ rootScopeなどの依存関係をドラッグします）。

<ul>
    <li ng-class="{active: activetab=='/dashboard'}">
       <a href="#/dashboard">dashboard</a>
    </li>
    <li ng-class="{active: activetab=='/lab'}">
       <a href="#/lab">lab</a>
    </li>
</ul>

多分このようなディレクティブはあなたの問題を解決するかもしれません：http : //jsfiddle.net/p3ZMR/4/

HTML

<div ng-app="link">
<a href="#/one" active-link="active">One</a>
<a href="#/two" active-link="active">One</a>
<a href="#" active-link="active">home</a>


</div>

JS

angular.module('link', []).
directive('activeLink', ['$location', function(location) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, controller) {
            var clazz = attrs.activeLink;
            var path = attrs.href;
            path = path.substring(1); //hack because path does bot return including hashbang
            scope.location = location;
            scope.$watch('location.path()', function(newPath) {
                if (path === newPath) {
                    element.addClass(clazz);
                } else {
                    element.removeClass(clazz);
                }
            });
        }

    };

}]);

ここで最も簡単な解決策：

Angular JSでブートストラップnavbarアクティブクラスを設定するにはどうすればよいですか？

これは：

ng-controllerを使用して、ng-viewの外部で単一のコントローラーを実行します。

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/')}"><a href="/">Home</a></li>
        <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
        <li ng-class="{ active: isActive('/cats')}"><a href="/cats">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

そしてcontrollers.jsに含めます：

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}

複数のネストされたビューをサポートするだけでなく、この種の作業を非常に簡単にするstate.uiモジュールの使用をお勧めします（以下のコードを引用）：

<ul class="nav">
    <li ng-class="{ active: $state.includes('contacts') }"><a href="#{{$state.href('contacts')}}">Contacts</a></li>
    <li ng-class="{ active: $state.includes('about') }"><a href="#{{$state.href('about')}}">About</a></li>
</ul>

読む価値があります。

次に、パスレベルの代わりに検索文字列を使用するXMLillies w / domiのLI変更の別のバージョンを示します。これは、私のユースケースで何が起こっているのか、もう少し明白だと思います。

statsApp.directive('activeTab', function ($location) {
  return {
    link: function postLink(scope, element, attrs) {
      scope.$on("$routeChangeSuccess", function (event, current, previous) {
        if (attrs.href!=undefined) { // this directive is called twice for some reason
          // The activeTab attribute should contain a path search string to match on.
          // I.e. <li><a href="#/nested/section1/partial" activeTab="/section1">First Partial</a></li>
          if ($location.path().indexOf(attrs.activeTab) >= 0) {
            element.parent().addClass("active");//parent to get the <li>
          } else {
            element.parent().removeClass("active");
          }
        }
      });
    }
  };
});

HTMLは次のようになります。

<ul class="nav nav-tabs">
  <li><a href="#/news" active-tab="/news">News</a></li>
  <li><a href="#/some/nested/photos/rawr" active-tab="/photos">Photos</a></li>
  <li><a href="#/contact" active-tab="/contact">Contact</a></li>
</ul>

XMLilleyのanwserは、最適で最も順応性があり、邪魔にならないものだと思いました。

しかし、小さな不具合がありました。

ブートストラップnavで使用するために、次のように変更しました。

app.directive('activeTab', function ($location) {
    return {
      link: function postLink(scope, element, attrs) {
        scope.$on("$routeChangeSuccess", function (event, current, previous) {
            /*  designed for full re-usability at any path, any level, by using 
                data from attrs
                declare like this: <li class="nav_tab"><a href="#/home" 
                                   active-tab="1">HOME</a></li> 
            */
            if(attrs.href!=undefined){// this directive is called twice for some reason
                // this var grabs the tab-level off the attribute, or defaults to 1
                var pathLevel = attrs.activeTab || 1,
                // this var finds what the path is at the level specified
                    pathToCheck = $location.path().split('/')[pathLevel],
                // this var finds grabs the same level of the href attribute
                    tabLink = attrs.href.split('/')[pathLevel];
                // now compare the two:
                if (pathToCheck === tabLink) {
                  element.parent().addClass("active");//parent to get the <li>
                }
                else {
                  element.parent().removeClass("active");
                }
            }
        });
      }
    };
  });

「if（attrs.href！= undefined）」を追加しました。この関数は見習いに2回呼び出され、2回目にはエラーが発生するためです。

htmlについて：

<ul class="nav nav-tabs">
   <li class="active" active-tab="1"><a href="#/accueil" active-tab="1">Accueil</a></li>
   <li><a active-tab="1" href="#/news">News</a></li>
   <li><a active-tab="1" href="#/photos" >Photos</a></li>
   <li><a active-tab="1" href="#/contact">Contact</a></li>
</ul>

ブートストラップの例。

Angulars組み込みルーティング（ngview）を使用している場合、このディレクティブを使用できます。

angular.module('myApp').directive('classOnActiveLink', [function() {
    return {
        link: function(scope, element, attrs) {

            var anchorLink = element.children()[0].getAttribute('ng-href') || element.children()[0].getAttribute('href');
            anchorLink = anchorLink.replace(/^#/, '');

            scope.$on("$routeChangeSuccess", function (event, current) {
                if (current.$$route.originalPath == anchorLink) {
                    element.addClass(attrs.classOnActiveLink);
                }
                else {
                    element.removeClass(attrs.classOnActiveLink);
                }
            });

        }
    };
}]);

マークアップが次のようになっているとします。

    <ul class="nav navbar-nav">
        <li class-on-active-link="active"><a href="/orders">Orders</a></li>
        <li class-on-active-link="active"><a href="/distributors">Distributors</a></li>
    </ul>

属性に必要なクラス名を設定できるので、これを行うのが好きでした。

場所をスコープに挿入し、それを使用してナビゲーションのスタイルを差し引くこともできます。

function IndexController( $scope, $rootScope, $location ) {
  $rootScope.location = $location;
  ...
}

次にそれをあなたの中で使用してくださいng-class：

<li ng-class="{active: location.path() == '/search'}">
  <a href="/search">Search><a/>
</li>

別の方法は、ui-sref-activeを使用することです

ui-srefとともに機能するディレクティブ。関連するui-srefディレクティブの状態がアクティブな場合に要素にクラスを追加し、非アクティブの場合はそれらを削除します。主な使用例は、ui-srefに依存するナビゲーションメニューの特別な外観を単純化することです。これは、「アクティブ」状態のメニューボタンを非アクティブメニュー項目と区別して異なるように表示することによって行います。

使用法：

ui-sref-active = 'class1 class2 class3'-関連するui-srefの状態がアクティブな場合、クラス「class1」、「class2」、および「class3」はそれぞれディレクティブ要素に追加され、非アクティブの場合は削除されます。

例：
次のテンプレートがある場合、

<ul>
  <li ui-sref-active="active" class="item">
    <a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>

アプリの状態が「app.user」で、値が「bilbobaggins」の状態パラメーター「user」が含まれている場合、結果のHTMLは次のようになります。

<ul>
  <li ui-sref-active="active" class="item active">
    <a ui-sref="app.user({user: 'bilbobaggins'})" href="/users/bilbobaggins">@bilbobaggins</a>
  </li>
  <!-- ... -->
</ul>

クラス名は、ディレクティブのリンク時に1回だけ補間されます（補間された値に対するそれ以上の変更は無視されます）。スペースで区切られた形式で複数のクラスを指定できます。

ui-sref-optsディレクティブを使用して、オプションを$ state.go（）に渡します。例：

<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>

コントローラにカスタム属性を含めることについてのロブの投稿に同意します。どうやら私はコメントするのに十分な担当者を持っていません。リクエストされたjsfiddleは次のとおりです。

サンプルHTML

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="link in links" ng-class="{active: $route.current.activeNav == link.type}"> <a href="{{link.uri}}">{{link.name}}</a>

        </li>
    </ul>
</div>

サンプルapp.js

angular.module('MyApp', []).config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/a', {
        activeNav: 'a'
    })
        .when('/a/:id', {
        activeNav: 'a'
    })
        .when('/b', {
        activeNav: 'b'
    })
        .when('/c', {
        activeNav: 'c'
    });
}])
    .controller('MyCtrl', function ($scope, $route) {
    $scope.$route = $route;
    $scope.links = [{
        uri: '#/a',
        name: 'A',
        type: 'a'
    }, {
        uri: '#/b',
        name: 'B',
        type: 'b'
    }, {
        uri: '#/c',
        name: 'C',
        type: 'c'
    }, {
        uri: '#/a/detail',
        name: 'A Detail',
        type: 'a'
    }];
});

http://jsfiddle.net/HrdR6/

'use strict';

angular.module('cloudApp')
  .controller('MenuController', function ($scope, $location, CloudAuth) {
    $scope.menu = [
      {
        'title': 'Dashboard',
        'iconClass': 'fa fa-dashboard',
        'link': '/dashboard',
        'active': true
      },
      {
        'title': 'Devices',
        'iconClass': 'fa fa-star',
        'link': '/devices'
      },
      {
        'title': 'Settings',
        'iconClass': 'fa fa-gears',
        'link': '/settings'
      }
    ];
    $location.path('/dashboard');
    $scope.isLoggedIn = CloudAuth.isLoggedIn;
    $scope.isAdmin = CloudAuth.isAdmin;
    $scope.isActive = function(route) {
      return route === $location.path();
    };
  });

テンプレートで以下を使用します。

<li role="presentation" ng-class="{active:isActive(menuItem.link)}" ng-repeat="menuItem in menu"><a href="{{menuItem.link}}"><i class="{{menuItem.iconClass}}"></i>&nbsp;&nbsp;{{menuItem.title}}</a></li>

一部のページではテンプレートをレンダリングするだけで、コントローラーがないため、コントローラーの変更を必要としないソリューションが必要でした。使用を提案してくれた以前のコメントのおかげで、$routeChangeSuccess私は次のようなものを思いつきました：

# Directive
angular.module('myapp.directives')
.directive 'ActiveTab', ($route) ->
  restrict: 'A'

  link: (scope, element, attrs) ->
    klass = "active"

    if $route.current.activeTab? and attrs.flActiveLink is $route.current.activeTab
      element.addClass(klass)

    scope.$on '$routeChangeSuccess', (event, current) ->
      if current.activeTab? and attrs.flActiveLink is current.activeTab
        element.addClass(klass)
      else
        element.removeClass(klass)

# Routing
$routeProvider
.when "/page",
  templateUrl: "page.html"
  activeTab: "page"
.when "/other_page",
  templateUrl: "other_page.html"
  controller: "OtherPageCtrl"
  activeTab: "other_page"

# View (.jade)
a(ng-href='/page', active-tab='page') Page
a(ng-href='/other_page', active-tab='other_page') Other page

URLに依存しないため、サブページなどに簡単に設定できます。

この方法をどこで見つけたのか思い出せませんが、とてもシンプルでうまく機能します。

HTML：

<nav role="navigation">
    <ul>
        <li ui-sref-active="selected" class="inactive"><a ui-sref="tab-01">Tab 01</a></li> 
        <li ui-sref-active="selected" class="inactive"><a ui-sref="tab-02">Tab 02</a></li>
    </ul>
</nav>

CSS：

  .selected {
    background-color: $white;
    color: $light-blue;
    text-decoration: none;
    border-color: $light-grey;
  } 

ngRoute（ルーティング用）を使用している場合、アプリケーションは以下の構成になります。

angular
  .module('appApp', [
    'ngRoute'
 ])
config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
}
});

次に、以下のように、この構成にコントローラーを追加します。

angular
      .module('appApp', [
        'ngRoute'
     ])
    config(function ($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl',
            activetab: 'main'
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl',
            activetab: 'about'
          })
    }
    })
  .controller('navController', function ($scope, $route) {
    $scope.$route = $route;
  });

設定でアクティブなタブについて述べたように、今度は<li>or <a>タグにアクティブなクラスを追加するだけです。お気に入り、

ng-class="{active: $route.current.activetab == 'about'}"

つまり、ユーザーが約ページをクリックすると、現在のタブが自動的に識別され、アクティブなCSSクラスが適用されます。

これが役に立てば幸いです！

上記の解決策はうまく機能していますが、少し複雑なものは不要であることがわかりました。簡単できちんとしたソリューションをまだ探している人にとって、それは完璧に仕事をします。

<section ng-init="tab=1">
                <ul class="nav nav-tabs">
                    <li ng-class="{active: tab == 1}"><a ng-click="tab=1" href="#showitem">View Inventory</a></li>
                    <li ng-class="{active: tab == 2}"><a ng-click="tab=2" href="#additem">Add new item</a></li>
                    <li ng-class="{active: tab == 3}"><a ng-click="tab=3" href="#solditem">Sold item</a></li>
                </ul>
            </section>