Ui-Router make $promise data available to child state view with no controller

Question

1. If I have a parent route with a controller, and a child route with no controller, shouldn't the children see the $scope data from the parent.

   .state('parent', {
     url: '/parent/{idParentRecord}?extraInfo',
     templateUrl: 'app/parent/parent.html',
     controller: 'ParentController',
     controllerAs: 'aparent'
   })
   .state('parent.child', {
     url: '/child/{idChild}',
     templateUrl: 'app/parent/child.html'
   })
   

2. Can I then just access properties in the parent $scope, as if they were in the child scope, so in the child view could I say:

   <h1>{{name}}</h1>
   

Assuming $scope.name has a value in ParentController's $scope?

3. If that's the case, and the controller is loading some slow data, when the parent $scope.data.subdata.mydata finally loads, if I have

   <p>{{data.subdata.mydata}}</p>
   

in my Controller-less parent.child state view, it should just show up when that data loads... right? Even if maybe I'm asking for something based on my childstate like calling a $scope.myfunc(idChild) that is filtering an array for me like

    <div ng-repeat="myparticle in getMyParticles($stateParams.idChild)">
      <p>{{myparticle.aproperty}}</p>

Thanks for the help!

Answer 1

Yes your thinking is correct as long as your child view is nested within your parent view. Scope properties will only inherit down the state chain if the views of your states are nested.

See the ui-router wiki section Scope Inheritance by View Hierarchy Only for more information.

I made a quick demo in plunker so you can see this: http://plnkr.co/edit/0EOdaXIiJhhoKElQnHfo?p=preview

States:

angular
  .module('app', ['ui.router'])
  .config(function ($stateProvider) {
     $stateProvider
        .state('parent', {
            url: '/parent',
            templateUrl: 'parent.html',
            controller: 'ParentController',
            controllerAs: 'aparent'
        })
        .state('parent.child', {
            url: '/child',
            templateUrl: 'child.html'
        });
  })
  .controller('ParentController', function () {
      var vm = this;

      vm.name = 'Test Name';
  });

parent.html:

<!-- Parent View -->
<h2>Parent View</h2>

<!-- This is where the child view will show -->
<ui-view></ui-view>

child.html

<!-- Child View -->
<h2>Child View</h2>

{{aparent.name}}