Cant access state inside directive controller

[Seena Sabti]

For some reason $state.current is always blank when I try to access it from a directive controller. Does the directive load before state evaluation? If so, is there a work around for this? I need to show the correct navigation based on the state in a SPA

For example in my view, I have: <navigation></navigation>

My directive:

angular.module('app')
        .directive('navigation', function($state){
            return {
                restrict: 'E',
                controller: function() {
                    alert($state.current.name);
                }
            }
         });

My routes:

angular.module('app')
        .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
            $urlRouterProvider.otherwise('/home');
            $stateProvider
                    .state('home', {
                        url: '/home',
                        views: {
                            "title": {
                                template: "<title>Home</title>"
                            },
                            "body": {
                                templateUrl: 'app/components/home/homeView.html',
                            },
                            "navigation" : {
                                templateUrl: 'app/shared/navigation/homeNavBarView.html'
                            }
                        }

                    })
        });

The way i have it set up is that i create the module separately, then i setup routing in a separate file, and the directive is also in a separate file. Then they are loaded in an index  file in order. Not sure if this has anything to do with it

What am I doing wrong?

[Sander Elias]

Hi Jim,

You are using an alert. That fires when your directive becomes active. Assuming your directive is outside your views, the state is not set by then. 

I assume you want to put something visual in. Create a isolated scope, do something like `scope.state = $state`, and put `{{state.current.name}}` in the template.

As I'm not using uiRouter, it is not certain that this will work tough ;) 

Does this help you?

Regards

Sander

[Jim]

Unfortunately this is not the case.

doing below in my directive does not make a difference

            controller: function($scope, $state) {

                $scope.state = $state.current.name;

            },

    template: '<span>{{state}}</span>'

[Sander Elias]

Jim,

Try using the syntaxis as I said in my previous mag!

[Anton Trapp]

uhm - why don't you inject $state when you declare the directive instead of making a parameter? Am I missing something?

[Jim]

You're right sander. I assigned the state object to scope.state in my controller and used state.current.name in my view and it shows the correct state and I think I understand the reason that it works this way. Is there anyway to use this evaluated value in my controller or as an attribute in templateUrl? As of now, I have <span st="{{state.current.name}}"></span>. I need to somehow access its value, but attrs.st doesnt evaluate the expression.

Thanks!

[Sander Elias]

Hi Jim.

attrs, only works on the element the directive is declared on. Can you show me what it is you are after?

preferably, build a plunk

Regards

Sander