Wie markiere ich einen aktuellen Menüpunkt?

Schlage ich vor, eine Richtlinie auf einen link.

Aber seine noch nicht perfekt. Watch out für die hashbangs 😉

Hier ist der javascript-Richtlinie:

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 not return including hashbang
        scope.location = location;
        scope.$watch('location.path()', function (newPath) {
          if (path === newPath) {
            element.addClass(clazz);
          } else {
            element.removeClass(clazz);
          }
        });
      }
    };
  }]);

und hier ist, wie es wäre, in html verwendet:

<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>

nachher styling mit css:

.active { color: red; }

InformationsquelleAutor der Antwort kfis

Nur meine zwei Cent hinzu, in der Debatte, die ich gemacht habe, ein reines Winkel-Modul (ohne jQuery), und es funktioniert auch mit hash-urls, die Daten enthalten. (z.B. #/this/is/path?this=is&some=data)

Fügen Sie einfach ein Modul als Abhängigkeit und auto-active einer der Vorfahren des Menüs. Wie diese:

<ul auto-active>
    <li><a href="#/">main</a></li>
    <li><a href="#/first">first</a></li>
    <li><a href="#/second">second</a></li>
    <li><a href="#/third">third</a></li>
</ul>

Und das Modul wie folgt Aussehen:

(function () {
    angular.module('autoActive', [])
        .directive('autoActive', ['$location', function ($location) {
        return {
            restrict: 'A',
            scope: false,
            link: function (scope, element) {
                function setActive() {
                    var path = $location.path();
                    if (path) {
                        angular.forEach(element.find('li'), function (li) {
                            var anchor = li.querySelector('a');
                            if (anchor.href.match('#' + path + '(?=\\?|$)')) {
                                angular.element(li).addClass('active');
                            } else {
                                angular.element(li).removeClass('active');
                            }
                        });
                    }
                }

                setActive();

                scope.$on('$locationChangeSuccess', setActive);
            }
        }
    }]);
}());

(Sie können natürlich nur mit der Direktive Teil)

Es ist auch Wert zu bemerken, dass dies nicht funktioniert für leer-hashes (z.B. example.com/# oder nur example.com) es muss mindestens example.com/#/ oder nur example.com#/. Aber dies geschieht automatisch mit ngResource und dergleichen.

Und hier ist die Geige: http://jsfiddle.net/gy2an/8/

InformationsquelleAutor der Antwort Pylinux

Es ist ein ng-class Richtlinie bindet die Variablen und css-Klassen.
Es akzeptiert auch das Objekt (className vs bool-Wert-Paare).

Hier ist das Beispiel, http://plnkr.co/edit/SWZAqj

InformationsquelleAutor der Antwort Tosh

Für AngularUI Router-Benutzer:

<a ui-sref-active="active" ui-sref="app">

Und das wird ein active Klasse auf das Objekt ausgewählt ist.

InformationsquelleAutor der Antwort frankie4fingers

Implementieren Sie können dies sehr einfach, hier ein Beispiel:

<div ng-controller="MenuCtrl">
  <ul class="menu">
    <li ng-class="menuClass('home')"><a href="#home">Page1</a></li>
    <li ng-class="menuClass('about')"><a href="#about">Page2</a></li>
  </ul>

</div>

Und dein Controller sollte so sein:

app.controller("MenuCtrl", function($scope, $location) {
  $scope.menuClass = function(page) {
    var current = $location.path().substring(1);
    return page === current ? "active" : "";
  };
});

InformationsquelleAutor der Antwort Ejaz

Mithilfe einer Richtlinie (seit wir tun, DOM-manipulation) das folgende ist wahrscheinlich die am nächsten an Dinge zu tun, die "Winkel-Weg":

$scope.timeFilters = [
  {'value':3600,'label':'1 hour'},
  {'value':10800,'label':'3 hours'},
  {'value':21600,'label':'6 hours'},
  {'value':43200,'label':'12 hours'},
  {'value':86400,'label':'24 hours'},
  {'value':604800,'label':'1 week'}
]

angular.module('whatever', []).directive('filter',function(){
return{
    restrict: 'A',
    template: '<li ng-repeat="time in timeFilters" class="filterItem"><a ng-click="changeTimeFilter(time)">{{time.label}}</a></li>',
    link: function linkFn(scope, lElement, attrs){

        var menuContext = attrs.filter;

        scope.changeTimeFilter = function(newTime){
          scope.selectedtimefilter = newTime;

        }

        lElement.bind('click', function(cevent){
            var currentSelection = angular.element(cevent.srcElement).parent();
            var previousSelection = scope[menuContext];

            if(previousSelection !== currentSelection){
                if(previousSelection){
                    angular.element(previousSelection).removeClass('active')
                }
                scope[menuContext] = currentSelection;

                scope.$apply(function(){
                    currentSelection.addClass('active');
                })
            }
        })
    }
}
})

Dann Ihre HTML würde das so Aussehen:

<ul class="dropdown-menu" filter="times"></ul>

InformationsquelleAutor der Antwort Wesley Hales

Meine Lösung für dieses problem, verwenden Sie route.current in das eckige Vorlage.

Als Sie die /tasks route zum highlight in Ihrem Menü, können Sie Ihre eigene Immobilie menuItem um die Routen erklärt, die von Ihrem Modul:

$routeProvider.
  when('/tasks', {
    menuItem: 'TASKS',
    templateUrl: 'my-templates/tasks.html',
    controller: 'TasksController'
  );

Dann in Ihre Vorlage tasks.htmlkönnen Sie folgende ng-class Richtlinie:

<a href="app.html#/tasks" 
    ng-class="{active : route.current.menuItem === 'TASKS'}">Tasks</a>

Meiner Meinung nach, das ist viel sauberer als alle vorgeschlagenen Lösungen.

InformationsquelleAutor der Antwort François Maturel

Hier ist noch eine weitere Richtlinie zu markieren, aktive links.

Key features:

• Funktioniert gut mit href, enthält dynamische Winkel Ausdrücken
• Kompatibel mit hash-bang navigation
• Kompatibel mit Bootstrap, in denen active-Klasse angewendet werden sollte, um parent-li nicht den link selbst
• Erlaubt link aktiv, wenn alle verschachtelten Pfad aktiv ist
• Erlaubt link deaktiviert, wenn es nicht aktiv ist

Code:

.directive('activeLink', ['$location', 
function($location) {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var path = attrs.activeLink ? 'activeLink' : 'href';
            var target = angular.isDefined(attrs.activeLinkParent) ? elem.parent() : elem;
            var disabled = angular.isDefined(attrs.activeLinkDisabled) ? true : false;
            var nested = angular.isDefined(attrs.activeLinkNested) ? true : false;

            function inPath(needle, haystack) {
                var current = (haystack == needle);
                if (nested) {
                    current |= (haystack.indexOf(needle + '/') == 0);
                }

                return current;
            }

            function toggleClass(linkPath, locationPath) {
                //remove hash prefix and trailing slashes
                linkPath = linkPath ? linkPath.replace(/^#!/, '').replace(/\/+$/, '') : '';
                locationPath = locationPath.replace(/\/+$/, '');

                if (linkPath && inPath(linkPath, locationPath)) {
                    target.addClass('active');
                    if (disabled) {
                        target.removeClass('disabled');
                    }
                } else {
                    target.removeClass('active');
                    if (disabled) {
                        target.addClass('disabled');
                    }
                }
            }

            //watch if attribute value changes /evaluated
            attrs.$observe(path, function(linkPath) {
                toggleClass(linkPath, $location.path());
            });

            //watch if location changes
            scope.$watch(
                function() {
                    return $location.path(); 
                }, 
                function(newPath) {
                    toggleClass(attrs[path], newPath);
                }
            );
        }
    };
}
]);

Verwendung:

Einfaches Beispiel mit kantigem Ausdruck, sagen wir $Umfang.var = 2, dann wird der link aktiv sein, wenn die Lage ist /url/2 :

<a href="#!/url/{{var}}" active-link>

Bootstrap Beispiel, parent-li aktiv Klasse:

<li>
    <a href="#!/url" active-link active-link-parent>
</li>

Beispiel mit verschachtelten urls, link wird aktiv, wenn irgendeine verschachtelte url aktiv ist (d.h. /url/1, /url/2, url/1/2/...)

<a href="#!/url" active-link active-link-nested>

Komplexen Beispiel-link verweist auf eine url (/url1), wird aber aktiv, wenn ein anderer ausgewählt ist (/url2):

<a href="#!/url1" active-link="#!/url2" active-link-nested>

Beispiel mit Behinderten link, wenn es nicht aktiv ist wird es 'deaktiviert' Klasse:

<a href="#!/url" active-link active-link-disabled>

Alle active-link-* Attribute können verwendet werden, in beliebiger Kombination, so sehr komplexe Bedingungen umgesetzt werden könnten.

InformationsquelleAutor der Antwort Eugene Fidelin

Laut @kfis 's Antworten, Kommentare, und meine empfehlen, die endgültige Fassung der Richtlinie wie folgt:

.directive('activeLink', ['$location', function (location) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs, controller) {
        var clazz = attrs.activeLink;        
        var path = attrs.href||attrs.ngHref;
        path = path.substring(1); //hack because path does not return including hashbang
        scope.location = location;
        scope.$watch('window.location.href', function () {
          var newPath = (window.location.pathname + window.location.search).substr(1);
          if (path === newPath) {
            element.addClass(clazz);
          } else {
            element.removeClass(clazz);
          }
        });
      }
    };
  }]);

und hier ist, wie es wäre, in html verwendet:

<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>

nachher styling mit css:

.active { color: red; }

InformationsquelleAutor der Antwort John_J

Keines der oben genannten Richtlinie Vorschläge waren nützlich für mich. Wenn Sie eine bootstrap navbar wie diese

<ul class="nav navbar-nav">
    <li><a ng-href="#/">Home</a></li>
    <li><a ng-href="#/about">About</a></li>
  ...
</ul>

(das könnte eine $ yo angular Autostart), dann möchte man hinzufügen .active zu den Eltern <li> element Klasse Liste, nicht das element selbst; ich.e <li class="active">..</li>. Also schrieb ich dies :

.directive('setParentActive', ['$location', function($location) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, controller) {
      var classActive = attrs.setParentActive || 'active',
          path = attrs.ngHref.replace('#', '');
      scope.location = $location;
      scope.$watch('location.path()', function(newPath) {
        if (path == newPath) {
          element.parent().addClass(classActive);
        } else {
          element.parent().removeClass(classActive);
        }
      })
    }
  }
}])

Nutzung set-parent-active; .active Standard ist also nicht erforderlich eingestellt zu werden

<li><a ng-href="#/about" set-parent-active>About</a></li>

und die Eltern <li> element .active wenn der link aktiv ist. Eine alternative .active Klasse wie .highlight einfach

<li><a ng-href="#/about" set-parent-active="highlight">About</a></li>

InformationsquelleAutor der Antwort davidkonrad

hatte das gleiche problem. Hier ist mein Lösung:

.directive('whenActive',
  [
    '$location',
    ($location)->
      scope: true,
      link: (scope, element, attr)->
        scope.$on '$routeChangeSuccess', 
          () ->
            loc = "#"+$location.path()
            href = element.attr('href')
            state = href.indexOf(loc)
            substate = -1

            if href.length > 3
              substate = loc.indexOf(href)
            if loc.length is 2
              state = -1

            #console.log "Is Loc: "+loc+" in Href: "+href+" = "+state+" and Substate = "+substate

            if state isnt -1 or substate isnt -1
              element.addClass 'selected'
              element.parent().addClass 'current-menu-item'
            else if href is '#' and loc is '#/'
              element.addClass 'selected'
              element.parent().addClass 'current-menu-item'
            else
              element.removeClass 'selected'
              element.parent().removeClass 'current-menu-item'
  ])

InformationsquelleAutor der Antwort Naxmeify

Schrieb ich einfach eine Richtlinie für diese.

Verwendung:

<ul class="nav navbar-nav">
  <li active><a href="#/link1">Link 1</a></li>
  <li active><a href="#/link2">Link 2</a></li>
</ul>

Umsetzung:

angular.module('appName')
  .directive('active', function ($location, $timeout) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        //Whenever the user navigates to a different page...
        scope.$on('$routeChangeSuccess', function () {
          //Defer for other directives to load first; this is important
          //so that in case other directives are used that this directive
          //depends on, such as ng-href, the href is evaluated before
          //it's checked here.
          $timeout(function () {
            //Find link inside li element
            var $link = element.children('a').first();

            //Get current location
            var currentPath = $location.path();

            //Get location the link is pointing to
            var linkPath = $link.attr('href').split('#').pop();

            //If they are the same, it means the user is currently
            //on the same page the link would point to, so it should
            //be marked as such
            if (currentPath === linkPath) {
              $(element).addClass('active');
            } else {
              //If they're not the same, a li element that is currently
              //marked as active needs to be "un-marked"
              element.removeClass('active');
            }
          });
        });
      }
    };
  });

Tests:

'use strict';

describe('Directive: active', function () {

  //load the directive's module
  beforeEach(module('appName'));

  var element,
      scope,
      location,
      compile,
      rootScope,
      timeout;

  beforeEach(inject(function ($rootScope, $location, $compile, $timeout) {
    scope = $rootScope.$new();
    location = $location;
    compile = $compile;
    rootScope = $rootScope;
    timeout = $timeout;
  }));

  describe('with an active link', function () {
    beforeEach(function () {
      //Trigger location change
      location.path('/foo');
    });

    describe('href', function () {
      beforeEach(function () {
        //Create and compile element with directive; note that the link
        //is the same as the current location after the location change.
        element = angular.element('<li active><a href="#/foo">Foo</a></li>');
        element = compile(element)(scope);

        //Broadcast location change; the directive waits for this signal
        rootScope.$broadcast('$routeChangeSuccess');

        //Flush timeout so we don't have to write asynchronous tests.
        //The directive defers any action using a timeout so that other
        //directives it might depend on, such as ng-href, are evaluated
        //beforehand.
        timeout.flush();
      });

      it('adds the class "active" to the li', function () {
        expect(element.hasClass('active')).toBeTruthy();
      });
    });

    describe('ng-href', function () {
      beforeEach(function () {
        //Create and compile element with directive; note that the link
        //is the same as the current location after the location change;
        //however this time with an ng-href instead of an href.
        element = angular.element('<li active><a ng-href="#/foo">Foo</a></li>');
        element = compile(element)(scope);

        //Broadcast location change; the directive waits for this signal
        rootScope.$broadcast('$routeChangeSuccess');

        //Flush timeout so we don't have to write asynchronous tests.
        //The directive defers any action using a timeout so that other
        //directives it might depend on, such as ng-href, are evaluated
        //beforehand.
        timeout.flush();
      });

      it('also works with ng-href', function () {
        expect(element.hasClass('active')).toBeTruthy();
      });
    });
  });

  describe('with an inactive link', function () {
    beforeEach(function () {
      //Trigger location change
      location.path('/bar');

      //Create and compile element with directive; note that the link
      //is the NOT same as the current location after the location change.
      element = angular.element('<li active><a href="#/foo">Foo</a></li>');
      element = compile(element)(scope);

      //Broadcast location change; the directive waits for this signal
      rootScope.$broadcast('$routeChangeSuccess');

      //Flush timeout so we don't have to write asynchronous tests.
      //The directive defers any action using a timeout so that other
      //directives it might depend on, such as ng-href, are evaluated
      //beforehand.
      timeout.flush();
    });

    it('does not add the class "active" to the li', function () {
      expect(element.hasClass('active')).not.toBeTruthy();
    });
  });

  describe('with a formerly active link', function () {
    beforeEach(function () {
      //Trigger location change
      location.path('/bar');

      //Create and compile element with directive; note that the link
      //is the same as the current location after the location change.
      //Also not that the li element already has the class "active".
      //This is to make sure that a link that is active right now will
      //not be active anymore when the user navigates somewhere else.
      element = angular.element('<li class="active" active><a href="#/foo">Foo</a></li>');
      element = compile(element)(scope);

      //Broadcast location change; the directive waits for this signal
      rootScope.$broadcast('$routeChangeSuccess');

      //Flush timeout so we don't have to write asynchronous tests.
      //The directive defers any action using a timeout so that other
      //directives it might depend on, such as ng-href, are evaluated
      //beforehand.
      timeout.flush();
    });

    it('removes the "active" class from the li', function () {
      expect(element.hasClass('active')).not.toBeTruthy();
    });
  });
});

InformationsquelleAutor der Antwort weltschmerz

Hier ist ein viel besserer Weg, es zu tun

<ul>
    <li ng-class="{ active: isActive('/tasks')}"><a href="/">Tasks</a></li>
</ul>

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

InformationsquelleAutor der Antwort Oluwaseye

Fand ich die einfachste Lösung. nur um zu vergleichen indexOf in HTML

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

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
         $rootScope.isCurrentPath = $location.path();  
    });
});



<li class="{{isCurrentPath.indexOf('help')>-1 ? 'active' : '' }}">
<a href="/#/help/">
          Help
        </a>
</li>

InformationsquelleAutor der Antwort NishantVerma.Me