Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change order in ui-router?

I have a cenario where I have a list and want to reorder it. I'm still new on ui-router and I couldnt figure out how to do it.

My states is something like this (with resolve to pass the data):

$stateProvider
    .state('shoppings-view', {
        url: '/shoppings/:id',
        templateUrl: 'shoppings/partial/shoppings-view/shoppings-view.html'
    }).state('shoppings-view.order', {
        url: '/:order',
        templateUrl: 'shoppings/partial/shoppings-view/shoppings-view.html'
    });

And here my controller:

angular.module('shoppings').controller('ShoppingsViewCtrl',function($scope, $stateParams){

    $scope.order = $stateParams.order != undefined ? $stateParams.order : 'id';
}

And a simple view with use a ng-repeat to show them. The problem is: if I'm in the url: /shoppings/1 and change the link to /shoppings/1/date the controller is not recalled and I can't change the order. So, how can I do something like that?

like image 850
Scoup Avatar asked Jan 11 '23 09:01

Scoup


1 Answers

This scenario with ui-router could have two (if not even more) solutions. Check both of them here in this working example. We can firstly continue with your Paren-Child scenario, we just have to do few changes

// Parent - Child Scenario
.config(['$stateProvider',
  function($stateProvider) {

  // parent child
  $stateProvider
    .state('shoppings-view', {
      url: '/shoppings/:id',
      templateUrl: 'tpl.shoppings-view.html',
      controller: 'ParentCtrl',
    })
    .state('shoppings-view.order', {
      url: '/:order',
      template: '<div>some child content if needed</div>',
      controller: 'ChildCtrl',
    });

 }])
.controller('ParentCtrl', function($scope, $state, $stateParams, DataSvc) {
  $scope.data = [];
  // parent declares method on a $scope
  $scope.load = function(params){
    $scope.data = DataSvc.getAll(params)
  }
  $scope.load($stateParams);
})
.controller('ChildCtrl', function($scope, $state, $stateParams) {
  // child scope has inherit that function
  // and calls the parent to relaod with new params
  $scope.load($stateParams);
})

What we can see here, is that child gets the $scope inherited (see Understanding Scopes) and therefore has access to a parent method $scope.load($stateParams);. Whenever there is new child state with new param invoked, it calls parent to relaod the data.

Maybe not the best here, but the concept of published methods on parent $scope, available for a child(ren) is a feature I do use a lot...

Second approach could be to move all that stuff into one simple state, with more params:

// scenario with Single state
.config(['$stateProvider',
    function($stateProvider) {

  // single state
  $stateProvider
    .state('shoppings', {
      url: '/shoppings-single/:id/:order',
      templateUrl: 'tpl.shoppings-single.html',
      controller: 'SingleCtrl',
      resolve : {
        data : function($stateParams, DataSvc){
          return DataSvc.getAll($stateParams)
        }
      }
    }); 

}])
.controller('SingleCtrl', function($scope, $state, $stateParams, data) {
  $scope.data = data;
  $scope.orderBy = $stateParams.order;
})

There is nothing special, just we can see that one state can have more params (see URL Parameters)

All that together check here

like image 71
Radim Köhler Avatar answered Jan 19 '23 00:01

Radim Köhler