angularjs ui-router set active link doesn't work

Question

I'm trying to set an active link on the current tab like

in jade
ul.nav.navbar-nav
                            li(ng-class="{ active: $state.includes('index') }")
                                a(ui-sref='index') Home
                            li(ng-class="{ active: $state.includes('post') }")
                                a(ui-sref='post') Post
 html
<li ng-class="{ active: $state.includes('index') }"><a ui-sref="index" href="#/">Home</a></li>
              <li ng-class="{ active: $state.includes('post') }"><a ui-sref="post" href="#/post">Post</a></li>




js   .config(function($stateProvider,RestangularProvider,PostProvider,PostsProvider,MediaProvider) {
            $stateProvider
                .state('index', {
                    url: '/',
                    templateUrl: 'admin/views/index.html',
                    controller: 'HomeCtrl'
                })
                .state('post', {
                    url: '/post',
                    templateUrl: 'admin/views/post/index.html',
                    resolve: {
                        posts: function(Posts){
                            return Posts.all();
                        }
                    },
                    controller: 'PostIndexCtrl'
                })

but it doesn't work. But if I try to check it:

.controller('PostIndexCtrl', function ($scope,posts,$state) {
        $scope.posts = posts;
        console.log($state.includes('post'));
    })

give me true.

Do you know what's the problem ?

Is $state available on $scope in the place you're doing that? — Nate Abele
– Nate Abele, Commented Jan 27, 2014 at 11:01
I've thought of the same thing (but it's quite odd because best practice say the scripts go close to </body> tag) my deploy gist.github.com/whisher/8646820 — Whisher
– Whisher, Commented Jan 27, 2014 at 11:17

Whisher · Accepted Answer · 2014-11-13 12:12:14Z

5

.run(function ($state,$rootScope, $log) {
   $rootScope.$state = $state;
});

You need to put $state on $rootScope if you want to access it. A great thanks to the ui-router folks :)

edited Nov 13, 2014 at 12:12

answered Feb 4, 2014 at 11:52

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amir T Over a year ago

Does $state.transitionTo('index'); contribute to the solution? If not, perhaps edit it out to avoid confusion?

Collectives™ on Stack Overflow

angularjs ui-router set active link doesn't work

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related