Ui-Router делает данные $promise доступными для представления дочернего состояния без контроллера

  1. Если у меня есть родительский маршрут с контроллером и дочерний маршрут без контроллера, не должны ли дети видеть данные $scope от родителя.

    .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. Могу ли я тогда просто получить доступ к свойствам в родительской $scope, как если бы они были в дочерней области, поэтому в дочернем представлении я мог бы сказать:

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

Предполагая, что $scope.name имеет значение в родительском контроллере $scope?

  1. Если это так, и контроллер загружает некоторые медленные данные, когда родительский элемент $scope.data.subdata.mydata наконец загружается, если у меня есть

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

в моем представлении состояния parent.child без контроллера он должен просто отображаться, когда эти данные загружаются ... верно? Даже если, возможно, я прошу что-то на основе моего дочернего состояния, например, вызов $scope.myfunc(idChild), который фильтрует для меня массив, например

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

Спасибо за помощь!


parent-child angularjs angular-ui-router
person Pól    schedule 23.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, ваше мышление правильное, если ваше дочернее представление вложено в родительское представление. Свойства области будут наследоваться вниз по цепочке состояний только в том случае, если представления ваших состояний являются вложенными.

См. вики-раздел ui-router Наследование области только по иерархии представлений для получения дополнительной информации.

Я сделал быструю демонстрацию в plunker, чтобы вы могли увидеть это: http://plnkr.co/edit/0EOdaXIiJhhoKElQnHfo?p=preview

Состояния:

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';
  });

родитель.html:

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

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

ребенок.html

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

{{aparent.name}}
person Rich Dean    schedule 23.12.2015