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()

both questions are valid - yes there us ui-view and there is abstract parent view. Sorry, I havent posted as there are many routes in parents.* state — npr, Oct 31 '16 at 11:45
I had ui-view commented in parent view which led to this issue. @RadimKöhler had rightly pointed yseterday and I missed out double-checking it. thank you. — npr, Nov 01 '16 at 09:57
That is great to see, I added the answer and a link to a bit complex solution with more of the power hidden in UI-Router - multi and named views . Good luck sir ;) — Radim Köhler, Nov 01 '16 at 10:01

score 1 · Answer 1 · answered Oct 31 '16 at 11:27

1

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?

answered Oct 31 '16 at 11:27

Max Taylor

343
3
16

That was a good catch - but unfortunately it still doesn't invoke childListController. I tried to simply introduce a bug by adding a typo error in injection of this controller - but there are no errors in console. I think it is not aware of the controller. I will change vm part to see if it helps. – npr Oct 31 '16 at 11:47

score 1 · Accepted Answer · edited May 23 '17 at 12:19

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?

edited May 23 '17 at 12:19

Community

1
1

answered Nov 01 '16 at 10:01

Radim Köhler

122,561
47
239
335

angularjs controller is not getting loaded/called

2 Answers2