AngularJS: reloading child view
I'm relatively new to AngularJS and have been cleaning SO for a few days now and am starting to pull my hair out.
Imagine a page with two panels. The left side is the parent and the right side is the child. The content of the child view is based on which child view is selected in the parent left side view.
When I first load the page, my parent view loads correctly (it presents a list of its interactive children using ui-sref). The child view is empty because the URL is not complete, only "/ parent"; he does not yet have a "childish" state. This is normal.
The first time I click on the child, the state changes from "/ parent" to "/ parent / child1" and loads the child view with the data "child1" nicely - just the way I want.
BUT THEN, no matter which other child I click in the Parent view, my child view does not reload / update; it remains with the data "child1". But the URL changes depending on the recently clicked "child" path. So if I click on "child9" the url changes to "/ parnet / child9", but the data on "child1" is preserved.
If I update and start over and select "child2" it still works nicely loading "child2" data without loading "child9" - same problem.
Any help would be greatly appreciated. I tried my best to write this for other people in the same predicament.
From index.html:
<div ng-controller="ParentController">
<li ng-repeat="child in childs" ui-sref-active="active">
<a ui-sref="parent.child({child:child.filter})">
{{child.name}}
<div ng-controller="ChildController">
<li ng-repeat="childData in childData">
{{childData}}
Controllers:
app.controller('ParentController', ['$scope', '$rootScope', function($scope, $rootScope,) {
// This controller presents a list of the parent children that are clickable
app.controller('ChildController', ['$scope', '$state', '$rootScope', '$stateParams', 'ChildService', function($rootScope, $state, $scope, $stateParams, ChildService) {
// This controller presents contents of the child
Services:
app.service('ParentService', function($rootScope){
// This service returns Parent Data from third party, in this case Firebase.
app.service('ChildService', function($stateParams){
var child = $stateParams.child;
// This service returns Child Data from third party, in this case Firebase.
From App.js:
$stateProvider
.state('parent', {
abstract: true,
url: '/parent',
templateUrl: 'home/parent.html',
}]
}
})
.state('parent.child', {
url: '/{child}',
templateUrl: 'home/child.html'
})
source to share
In Angular, services and factories are single points - they are called only once, and all you return is a service. Your CHildService and ParentService are only called when the corresponding page is first loaded.
Instead, you want to do something like this:
app.service('ChildService', function(){
// return a function that can be called with each page load
return function(childId) {
// I have no idea what this service returns, so I'm just making something up
return listOfChildren[childId];
}
});
app.controller('ChildController', function($scope, $stateParams, ChildService) {
// get the child based on the CURRENT value of child query parameter
$scope.child = ChildService($stateParams.child);
});
source to share