Bootstrap和Angular JS按钮问题

Question

I have this bootstrap and Angular JS app. I am using the following directive to show active navigation links:

mainControl.directive("myDataToggle", function(){
    function link(scope, element, attrs) {
        var e = angular.element(element);
        e.on('click', function(){
            e.parent().parent().children().removeClass('active');
            e.parent().addClass("active");
        })
    }
    return {
        restrict: 'A',
        link: link
    };
});

Problem is this works fine in the nav, but if I have a button link that links to the separate sections of the app, the main nav at the top does not get updated To reflect which view I am in?

Any ideas?

Answer 1

The problem is that you're setting the class when you're clicking the link, not when you are navigating. I presume you're using the ngRoute. If so you can try this approach:

Provide a name for your routes

$routeProvider.
    when('/', {
        templateUrl: 'views/home.html',
        name: 'home'
    }).
    when('/about', {
        templateUrl: 'views/about.html',
        name: 'about'
    });

Than add $route to your main controller, and pass it on to $scope

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

Now you can add the active class using ng-class

<a ng-class="{active: $route.current.name == 'home'}"> Home </a>
<a ng-class="{active: $route.current.name == 'about'}"> About </a>

demo: https://jsfiddle.net/jkrielaars/mao8kx0L/2/