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?

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?

• javascript
• angularjs

Share Improve this question Follow edited Dec 11, 2012 at 22:45 Kyeotic asked Dec 11, 2012 at 17:31 KyeoticKyeotic 19.9k1212 gold badges7272 silver badges132132 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 bees 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 bees visible in the child view.

Does this solve your problem?