Capturing and using URL in angular UI-router

Question

I have a state:

.state('series', {
    url: '/{series}/',
    template: '<div configurator-list></div>',
    resolve: {
        stateService: 'ConfiguratorStateService'
    },
    params: {
        series: '{series}'
    },
    controller: 'ConfiguratorListController',
    ncyBreadcrumb: {
        label: '{series}',
        parent: 'home'
    }
});

I'd like to use actual value for {series} that is in the URL to update a few things. I'm lost and haven't had any luck searching. Everything takes me to the UI-router page, but I don't see any concrete examples there.

Marcidius · Accepted Answer · 2016-01-11 20:27:58Z

You need to listen for any of the UI-Router state change events and use the parameters from that function to obtain it. Add a listener in upon your app run (substitute app name for 'myApp') which is detailed below...

(function() {
    angular.module('myApp')
        .run(runOptions);

runOptions.$inject = ['$rootScope', '$state'];

function runOptions($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        if (toState.name === 'series') {
            //output the parameter here... since the series parameter is actually the string of the url, use the url property
            console.log(toState.url);
        }
    });
}
})();

There are other state change events you can use as well, depending on your intended use: https://github.com/angular-ui/ui-router/wiki#state-change-events

OR

What sounds more relevant with further reading of your question, modify your route definition...

Change url: '/{series}/' to '/:series'

Then, in your controller....

angular.controller('ConfiguratorListController', function($stateParams) {
  var vm = this;
  vm.series = $stateParams.series;
}

Collectives™ on Stack Overflow

Capturing and using URL in angular UI-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related