When trying to access $state.current.name from a directive controller, it always appears to be blank. Is it possible that the directive loads before the state evaluation process? If so, what would be a suitable workaround for this issue? The goal is to display the correct navigation based on the state in a Single Page Application.
As an illustration, in my view, I have:
<navigation></navigation>Here is my directive:
angular.module('app')
.directive('navigation', function($state){
return {
restrict: 'E',
controller: function() {
alert($state.current.name);
}
}
});
These are 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 structure I have in place involves creating the module separately, setting up routing in a distinct file, and having the directive in a separate file as well. Then, these files are loaded in a specific order within an index file. I am unsure if this arrangement contributes to the issue.
Could you provide guidance on what might be the root cause of this problem?