AngularJS ui-router navigating states with $state.params and queries

Question

I have an app with multiple states that each have nested views. The one state has a conditional templateUrl, and based on a $state.param will show specific HTML/JS. I want to set a query on the URL of the state, so that I know which list item is being looked at when I click it. I cannot figure out how to set a url query and transition to the desired state's view.

My states:

 .state('index', {
        url: '/',
        views: {
            '@' : {
                templateUrl: 'views/layout.html'
            },
            'top@index' : {
                templateUrl: 'views/top.html',
                controller: function($scope, $state) {
                    $scope.logOut = function() {
                        $state.go('login');
                    };
                }
            },
            'left@index' : { templateUrl: 'views/left.html' },
            'main@index' : { templateUrl: 'views/main.html' }
        }
    })
    .state('index.list', {
        url: 'list?item',
        templateUrl: 'views/lists/list.html',
        controller: 'ListCtrl'
    })
    .state('index.list.details', {
        url: '/',
        params: {
            detail: 'overview'
        },
        controller: ctrl,
        views: {
            'details@index' : {
                templateUrl: function($stateParams) {
                    if($stateParams.detail === 'status' ) {
                        ctrl = 'StatusCtrl';
                        return 'views/details/status.html';
                    } else if ($stateParams.detail === 'overview') {
                        ctrl = 'OverviewCtrl';
                        return 'views/details/overview.html';
                    }
                }
            }
        },
    })

In my controller for the index.list, this is where I have the list and click and populate the details view.

HTML & Js:

<div class="channel" ng-repeat="item in items" ng-click="viewListDetails(item)">

$scope.viewListDetails = function(item) {
    $location.search('item', item.id);
    $state.go('index.list.details', {detail: 'status'}, {reload: true})
};

My JS above runs the through the function however it does nothing! It will not set the query or transition to the desired view for that sate.

Any help is appreciated!

put this in the application.run => $rootScope.$on("$stateChangeError", console.log.bind(console)); to log transition errors, maybe it fails silently. — koox00
– koox00, Commented Feb 3, 2016 at 20:27

Eran Shabi · Accepted Answer · 2016-02-03 19:49:29Z

0

index.deviceList.detail is not a defined state. You probably intended to write index.list.details.

answered Feb 3, 2016 at 19:49

Eran Shabi

15.2k8 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tester123 Over a year ago

Whoops that's my typo in copy and paste into stack overflow, thanks for pointing that out.

Eran Shabi Over a year ago

You should debug your code and see what templateUrl return when you click, or event if the function is even called at all. Also those ctrl = 'OverviewCtrl'; looks not right, as ctrl is not defined.

Collectives™ on Stack Overflow

AngularJS ui-router navigating states with $state.params and queries

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related