Revealing the name of the current state using UI router

Question

Revealing the name of the current state using UI router

Seeking a solution to implement a language switcher that seamlessly navigates users from the "en" side to the corresponding "de" page when they click on the language toggle. Currently, I am exploring the $state parameter and noticing that accessing the values I need through the "current" property is viable. However, I encounter some limitations when trying to pinpoint specific values within nested views.

I am considering an approach where, while on a URL like url/en/content, the language navigation dynamically loads destination points into a data attribute. With a custom directive, I aim to trigger a "go to" function and set the preferredLanguage value using angular-translate.

The main challenge lies in extracting the precise $state name; browsing $state reveals the desired values in the current object, but directly accessing $state.current only returns the parent state.

If anyone can suggest a more elegant Angular method (without resorting to custom cookies), I'm open to any recommendations.

Thank you!

Update! CODE SAMPLES:

Object reference of my states:

var urlStates = {
        en: {
            home: {
                name: 'home',
                url: '/en',
                templateUrl: 'templates/'+lang+'/home.html',
                abstract: 'true'
            },
            home_highlights: {
                name:'home.highlights',
                url: '',
                templateUrl: 'templates/'+lang+'/home.highlights.html'
            },
            home_social:
            {
                name: 'home.social',
                url: '/social',
                templateUrl: 'templates/'+lang+'/home.social.html'
            },
            home_map:
            {
                name: 'home.map',
                url: '/map',
                templateUrl: 'templates/'+lang+'/home.map.html'
            }

        };

My States:

$stateProvider
        .state(urlStates.en.home)
        .state(urlStates.en.home_highlights)
        .state(urlStates.en.home_social)
        .state(urlStates.en.home_map);

        $locationProvider.html5Mode(true);

})

Controller:

.controller('LandingPage', function($translate, $state){
    this.state = $state;
    this.greeting = "Hello";
});

And Lastly, the output I see in the dom:

With this.state = $state;

{
    "params": {},
    "current": {
        "name": "home.highlights",
        "url": "",
        "templateUrl": "templates/en/home.highlights.html" },
        "transition": null
}

With this.state = $state.current

{
    "name": "",
    "url": "^",
    "views": null,
    "abstract": true
}

javascript angularjs angular-ui-router angular-translate

Answer 1

Answer №1

this is my method

JAVASCRIPT:

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

app.run( ['$rootScope', '$state', '$stateParams',
                      function ($rootScope,   $state,   $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams; 
}
]);

HTML:

<pre id="uiRouterDetails">
      $state name = {{$state.current.name}}
      $stateParams details = {{$stateParams}}
      $state full URL = {{ $state.$current.url.source }}    
</pre>

DEMONSTRATION

http://example.com/edit/ABC123?p=preview

Answer 2

this is my method

JAVASCRIPT:

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

app.run( ['$rootScope', '$state', '$stateParams',
                      function ($rootScope,   $state,   $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams; 
}
]);

HTML:

<pre id="uiRouterDetails">
      $state name = {{$state.current.name}}
      $stateParams details = {{$stateParams}}
      $state full URL = {{ $state.$current.url.source }}    
</pre>

DEMONSTRATION

http://example.com/edit/ABC123?p=preview

Answer 3

Answer №2

Responding to your inquiry in this specific manner presents a significant challenge.

However, you inquire about navigation and express concerns regarding the current $state appearing to behave strangely.

In response to the first query, I would consider it being too broad, while for the second concern, it could likely signify an error on your part or overlooking something obvious :)

Consider the following controller:

app.controller('MainCtrl', function($scope, $state) {
  $scope.state = $state;
});

Where app is configured as:

app.config(function($stateProvider) {
  $stateProvider
    .state('main', {
        url: '/main',
        templateUrl: 'main.html',
        controller: 'MainCtrl'
    })
    .state('main.thiscontent', {
        url: '/thiscontent',
        templateUrl: 'this.html',
        controller: 'ThisCtrl'
    })
    .state('main.thatcontent', {
        url: '/thatcontent',
        templateUrl: 'that.html'
    });
});

A simple HTML template with

<div>
  {{ state | json }}
</div>

Would display something like the example below

{ 
  "params": {}, 
  "current": { 
    "url": "/thatcontent", 
    "templateUrl": "that.html", 
    "name": "main.thatcontent" 
  }, 
  "transition": null
}

I have provided a brief demonstration illustrating this scenario using ui.router and pascalprecht.translate for the menus. Hopefully, you can derive value from it and identify the issue at hand.

Check out the Plunker here http://plnkr.co/edit/XIW4ZE

Screenshot

Answer 4

Responding to your inquiry in this specific manner presents a significant challenge.

However, you inquire about navigation and express concerns regarding the current $state appearing to behave strangely.

In response to the first query, I would consider it being too broad, while for the second concern, it could likely signify an error on your part or overlooking something obvious :)

Consider the following controller:

app.controller('MainCtrl', function($scope, $state) {
  $scope.state = $state;
});

Where app is configured as:

app.config(function($stateProvider) {
  $stateProvider
    .state('main', {
        url: '/main',
        templateUrl: 'main.html',
        controller: 'MainCtrl'
    })
    .state('main.thiscontent', {
        url: '/thiscontent',
        templateUrl: 'this.html',
        controller: 'ThisCtrl'
    })
    .state('main.thatcontent', {
        url: '/thatcontent',
        templateUrl: 'that.html'
    });
});

A simple HTML template with

<div>
  {{ state | json }}
</div>

Would display something like the example below

{ 
  "params": {}, 
  "current": { 
    "url": "/thatcontent", 
    "templateUrl": "that.html", 
    "name": "main.thatcontent" 
  }, 
  "transition": null
}

I have provided a brief demonstration illustrating this scenario using ui.router and pascalprecht.translate for the menus. Hopefully, you can derive value from it and identify the issue at hand.

Check out the Plunker here http://plnkr.co/edit/XIW4ZE

Screenshot

Answer 5

Answer №3

In the current project I'm working on, the solution is structured like this:

I designed an abstract Language State

$stateProvider.state('language', {
    abstract: true,
    url: '/:language',
    template: '<div ui-view class="lang-{{language}}"></div>'
});

Every state within the project needs to rely on this state

$stateProvider.state('language.dashboard', {
    url: '/dashboard'
    //....
});

The language switch buttons trigger a custom function:

<a ng-click="footer.setLanguage('de')">de</a>

Within the corresponding function (located in a controller), it looks like this:

this.setLanguage = function(lang) {
    FooterLog.log('switch to language', lang);
    $state.go($state.current, { language: lang }, {
        location: true,
        reload: true,
        inherit: true
    }).then(function() {
        FooterLog.log('transition successfull');
    });
};

This method works, but there could be a cleaner solution by simply changing a value in the state params from HTML:

<a ui-sref="{ language: 'de' }">de</a>

Unfortunately, this approach does not function as expected, as mentioned in https://github.com/angular-ui/ui-router/issues/1031

Answer 6

In the current project I'm working on, the solution is structured like this:

I designed an abstract Language State

$stateProvider.state('language', {
    abstract: true,
    url: '/:language',
    template: '<div ui-view class="lang-{{language}}"></div>'
});

Every state within the project needs to rely on this state

$stateProvider.state('language.dashboard', {
    url: '/dashboard'
    //....
});

The language switch buttons trigger a custom function:

<a ng-click="footer.setLanguage('de')">de</a>

Within the corresponding function (located in a controller), it looks like this:

this.setLanguage = function(lang) {
    FooterLog.log('switch to language', lang);
    $state.go($state.current, { language: lang }, {
        location: true,
        reload: true,
        inherit: true
    }).then(function() {
        FooterLog.log('transition successfull');
    });
};

This method works, but there could be a cleaner solution by simply changing a value in the state params from HTML:

<a ui-sref="{ language: 'de' }">de</a>

Unfortunately, this approach does not function as expected, as mentioned in https://github.com/angular-ui/ui-router/issues/1031

Answer 7

Answer №4

Implementing Timeout Function

$timeout(function () { console.log($state.current, 'Everything is working perfectly'); }, 100);

Check out the discussion on this GitHub thread

Answer 8

Implementing Timeout Function

$timeout(function () { console.log($state.current, 'Everything is working perfectly'); }, 100);

Check out the discussion on this GitHub thread

Answer 9

Answer №5

I successfully implemented $state with $timeout.

To demonstrate,

(function() {
  'use strict';

  angular
    .module('app')
    .controller('BodyController', BodyController);

  BodyController.$inject = ['$state', '$timeout'];

  /* @ngInject */
  function BodyController($state, $timeout) {
    $timeout(function(){
      console.log($state.current);
    });

  }
})();

Answer 10

I successfully implemented $state with $timeout.

To demonstrate,

(function() {
  'use strict';

  angular
    .module('app')
    .controller('BodyController', BodyController);

  BodyController.$inject = ['$state', '$timeout'];

  /* @ngInject */
  function BodyController($state, $timeout) {
    $timeout(function(){
      console.log($state.current);
    });

  }
})();

Answer 11

Answer №6

The delay in receiving the current state from Angular is simply due to the time it takes to load.

One way to ensure you get the accurate current state is by utilizing the $timeout function, which will provide the correct result in the $state.current.name property.

$timeout(function(){
    $rootScope.currentState = $state.current.name;
})

Answer 12

The delay in receiving the current state from Angular is simply due to the time it takes to load.

One way to ensure you get the accurate current state is by utilizing the $timeout function, which will provide the correct result in the $state.current.name property.

$timeout(function(){
    $rootScope.currentState = $state.current.name;
})

Revealing the name of the current state using UI router

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Does the content within {{ }} get monitored for updates on my webpage?

Click event doesn't trigger the 'else if' statement in jQuery

Utilizing nested routes in Node.js with express.js framework!

Is it necessary to alter the number of rows or columns in the table?

Adjust the DOM based on the output of the function

What are the steps for configuring clusters in an expressjs 4.x application?

Retrieve the property called "post" using Restangular

Getting the specific key of the selected item from material-ui autocomplete when onSelect is triggered, rather than simply retrieving the value

Utilizing the content of an HTML element within Ruby embedded code - a comprehensive guide

Sketch a line extending from one element to the next

Retrieving the current value of the selected option using JQuery

Next.js deployments on Vercel are encountering issues with resolving local fonts

The express gateway is unable to transfer multipart/formdata

Utilizing vanilla JavaScript within a React.js component: A step-by-step guide

extract the information from a specific div on a different website using JavaScript

Guidelines for integrating deep links into a ReactJS Ionic Android application

Error: Attempting to access property 'mouseX' of an undefined object was unsuccessful

`How can I retrieve the previous location path in an AngularJS application?`

Increase in textbox size depending on selected dropdown value

The ng2-dnd library encountered an issue: StaticInjectorError in AppModule with SortableComponent pointing to ElementRef