npr npr - 1 month ago 6
AngularJS Question

angularjs controller is not getting loaded/called

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

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

Comments