AngularJS使用html5路由在路由更改时添加活动类

时间:2015-04-19 08:56:11

标签: javascript angularjs

我正在使用指令将活动类添加到菜单中的项目。它工作得很好,直到我改为html5路由。现在它不起作用。

以下是该指令的代码。

app.directive('siteNavbar', ['$location', function($location) {
    return {
      restrict: 'A',
      templateUrl: 'partials/tpl/site-navbar.html',
      link: function (scope, elem) {
        //after the route has changed
        scope.$on("$routeChangeSuccess", function () {
          var hrefs = ['/#' + $location.path(),
            '#' + $location.path(),
            $location.path()];
          angular.forEach(elem.find('a'), function (a) {
            a = angular.element(a);
            if (-1 !== hrefs.indexOf(a.attr('href'))) {
              a.parent().addClass('active');
            } else {
              a.parent().removeClass('active');   
            };
          });     
        });
        $(document).on('click.nav','.navbar-collapse.in',function(e) {
          if( $(e.target).is('a') ) {
            $(this).removeClass('in').addClass('collapse');
          }
        });
      }
    };
}]);

我认为问题出现在代码的这一部分。

var hrefs = ['/#' + $location.path(),
  '#' + $location.path(),
  $location.path()];

但是我无法弄清楚如何改变它以使其发挥作用,实际上我不确定它为什么会起作用。

0 个答案:

没有答案