Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ui-sref-active match doesn't consider anchor hashes #2761

Closed
zoff opened this issue May 20, 2016 · 5 comments
Closed

ui-sref-active match doesn't consider anchor hashes #2761

zoff opened this issue May 20, 2016 · 5 comments

Comments

@zoff
Copy link

zoff commented May 20, 2016 •
edited
Loading

ui-sref-active directive doesn't consider hashes when matching.
Multiple anchors on the same page are always altogether active.

Take for example a bootstrap tab set in a single page:

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <style type="text/css">
      .nav-tabs > li.active > a { color: red; }
    </style>
  </head>
  <body ng-app="app">
    <section ui-view></section>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.min.js"></script>
    <script>
    var app = angular.module('app',['ui.router']);
    app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/mypage#tab1') //defaults to mypage
        $stateProvider
          .state('mypage', {
            url: "/mypage",
            template: 
                `
                <div>
                  <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" ui-sref-active="active">
                      <a ui-sref="mypage({ '#': 'tab1' })" aria-controls="home" role="tab" data-toggle="tab">Tab #1</a>
                    </li>
                    <li role="presentation" ui-sref-active="active">
                      <a ui-sref="mypage({ '#': 'tab2' })" aria-controls="profile" role="tab" data-toggle="tab">Tab #2</a>
                    </li>
                  </ul>
                </div>
                `
          });
      }
    ]);
    </script>
  </body>
</html>

On page load both li elements will get "active" class with all the following urls:

  • /#/myage
  • /#/myage#tab1
  • /#/myage#tab2

There's should be an option to select match strategy and choose if you want to consider location hashes.

I'm using:
Angular v1.5.5
Angular UI Router v0.3.0
@christopherthielen
Copy link
Contributor

Can you check the behavior of the latest 1.0 release?

@christopherthielen
Copy link
Contributor

n/m I just pasted your code into a plunk and tested it.

I think it works as you want in 1.0: http://plnkr.co/edit/3wFeU4tBkLwEjU9xNZx8?p=preview

@zoff
Copy link
Author

zoff commented May 22, 2016

Good to know, I can confirm that but I'm not a fan of alpha software.
Is there any possibility to have this feature in 0.x branch?

Is there an ETA for 1.x?

@eddiemonge
Copy link
Contributor

Soon, here's the checklist #2223

@christopherthielen
Copy link
Contributor

closing because this is fixed in master.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@eddiemonge @zoff @christopherthielen