CODEWITHSUNDEEP
javascriptangularjs
user1009835
user1009835

Reputation:

AngularJS - State name passed into controller doesn't work

I'm new to angular and I can't figure out why this isn't working.

When I call {{$state.current.name}} in my view it works perfectly fine, but as soon as I try to pass it to my controller, the state gets "lost".

Here is my setup:

Module:

angular.module('app', ['ui.router'])

        .run(function ($rootScope, $state, $stateParams) {
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
        })
        //followed by boilerplate ui router setup

View:

<home-nav-bar></home-nav-bar>

Directive:

angular.module('app')
            .directive('homeNavBar', function () {
                return {
                    restrict: 'E',
                    templateUrl: 'homeNavBarView.html',
                    controller: 'navCtrl'
                };
            })
})();

Controller:

angular.module('app')
            .controller('navCtrl', function ($state, $scope) {
                   alert($state.current.name); //returns empty
            });
})();

At this point I am clueless as to why I can get the state name in the view but not in my controller..

Upvotes: 1

Views: 848

Answers (1)

user2847643
user2847643

Reputation: 2935

Well, ui-router docs say you can access current state's config object using the current property of $state, so there is absolutely no need to attach anything to $rootScope. I have just tested something along the lines of (simplified a bit for readability):

angular.module('myApp')
.controller('SomeCtrl', function ($scope, $state) {  
  console.log($state.current);
});

The result in Chrome console is:

Object {url: "/some", templateUrl: "app/some.html", controller: "SomeCtrl", name: "some"}

So as you can see all information should be available along with the name.

Upvotes: 4

Related Questions