Controller load order differs when loading or navigating

All we need is an easy explanation of the problem, so here it is.

So the structure of my controller may be to blame for this. Here you can see the parent and child controllers, but the important parts are here :

Parent Controller

//Load version
$scope.person = People.people.get({ id: $routeParams.id}, function(person) {
     var associations = {
         events: person.events || [],
         people: person.people || [],
         places: person.places || []
     };
     $scope.$broadcast('setAssociations', associations);
});
//Event version
$scope.$on('getAssociations', function(e, args) {
  var associations = {
    events: $scope.person.events || [],
    people: $scope.person.people || [],
    places: $scope.person.places || []
  };
  $scope.$broadcast('setAssociations', associations);
});

Child Controller

$scope.$on('setAssociations', function(event, args) {
    $scope.parentEvents = args.events;
});

$scope.$emit('getAssociations', {});

The idea is that I need to get the events from the parent’s person object down to the child controller. The problem is, each method of raising setAssociations from the parent only works in one context.

The load version works if the page is navigated to from within the app (hash, navigation). However, when reloading or navigating from outside (full load), the child event is never raised, presumably because it hasn’t registered its listeners yet.

The event version works if the page is refreshed, or navigated to from outside the app (anything causing the page to fully load). When navigated to, the $scope is empty though, and this method fails.

So the order in which the app loads the controllers is different when “deep-linking” or refreshing, and when doing internal navigation. How can I get consistent load behavior from angular controllers that have a parent child relationship?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Looking at the problem from a different perspective, since child scopes prototypically inherit from parent scopes, this means that any properties we define on a parent scope are immediately accessible in the child scope… even if you add properties to the parent scope later, after the child scope is created. In other words, you might not have to use an event to get the information you want to the child.

If your problem is simply that the child scope needs some information from the parent scope, just assign that data to a new parent $scope property, and have your child view access it. When it becomes defined, it will appear in the child view. Instead of var associations, try $scope.associations.

Here is a contrived fiddle that uses an ng-click to add some data to a parent scope, which then becomes visible in the child view.

Does this solve your problem?

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply