angularjs controller is not getting loaded/called

Question

When transitioning from state parents.view to parents.view.childs - I do not see the controller associated with parents.view.childs being called/loaded. But prints within getChilds() is seen for which I see server responding with childs data.

But I cannot understand why childs controllers is not getting called. There are no errors on console.

Is there something wrong with using controllerAs : 'vm' in both states or something else ? Also please point how to debug state transitions ?

angular route file

.state('parents.view', {
  url: '/:parentId',
  templateUrl: 'modules/parents/client/views/view-parent.client.view.html',
  controller: 'parentsController',
  controllerAs: 'vm',
  resolve: {
    parentResolve: getparent
  },
  data: {
    pageTitle: 'parent {{ parentResolve.name }}'
  }
})
.state('parents.view.childs', {
  url: '/childs',
  templateUrl: 'modules/childs/client/views/list-childs.client.view.html',
  controller: 'childsListController',
  controllerAs: 'vm',
  resolve: {
    parentResolve: getchilds
  },
  data: {
    pageTitle: 'childs List'
  }
})

getchilds.$inject = ['$stateParams', '_childsService'];

function getchilds($stateParams, _childsService) {
  console.log('getting childs');
  return _childsService.query().$promise;
}

controller

(function () {
  'use strict';

  angular
    .module('childs')
    .controller('childsListController', childsListController);

  childsListController.$inject = ['$stateParams','$state', 'childResolve'];

  function childsListController($stateParams,$state,childResolve) {
    console.log('say hello',childResolve);
    vm.childs = childResolve;
  }
}());

edit made : get_childs() to getchilds()

Answer 1

To have an answer:

When a child is not loaded - always check that parent has a place(holder) for it

ui-view=""

Even better, if there are named views, we need for each of them a target

ui-view="name1"
ui-view="name2"

and use proper absolute naming in child views :{} definition. Check here for more details

• Nested states or views for layout with leftbar in ui-router?

Answer 2

You need to inject each resolve object as a dependency in the corresponding controller.

In your childsListController you are only injecting childResolve, while the only resolve object you have declared is

parentResolve: getchilds

I'm not very familiar with this syntax, but maybe the problem was simply forgetting to change 'parentResolve' to 'childResolve' in the parent.view.childs state?