Controller load order differs when loading or navigating

Question

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?

Mark Rajcok Mark Rajcok · Accepted Answer · 2012-12-12T16:06:16

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?

Controller load order differs when loading or navigating

1 Answers