Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
672 views
in Technique[技术] by (71.8m points)

angularjs - Angular UI Router: How do I get parent view to be "active" when navigating to nested view?

I'm working on a project that has implemented the UI router and it's using ui-sref-active="active" to add the active class to the navigation menu item when that item is the current route. However, when you navigate to a nested view within that view, the parent menu item is no longer active. See the following Plunker:

http://plnkr.co/edit/2CoEdS?p=preview

By default (or if you click on it) Route 1 is "active". When you click on "Show List," you will see that Route 1 is no longer active.

Edit:

The only difference between this example and my actual project is that the navigation menu in my actual project has its own controller and so does not use the same scope as the controller for "route1".

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

EDIT For updated ui-router 0.2.13:

ui-sref-active="active" now sets the 'active' class when the current state is the ui-sref's state or any child

ui-sref-active-eq="active" behaves as the previous iterations of ui-sref-active, and only sets the class for the exact state

Original Answer:

See open ui-router issues: https://github.com/angular-ui/ui-router/issues/704 and 818

A general workaround people are suggesting is:

ng-class="{active:$state.includes('route1')}"

Of course, $state must be added to $scope. See updated plunk: http://plnkr.co/edit/KHLDJP?p=preview


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...