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 на ParentController?

  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

Да, вашето мислене е правилно, стига дъщерният ви изглед да е вложен във вашия родителски изглед. Свойствата на обхват ще наследяват само надолу по веригата на състоянията, ако изгледите на вашите състояния са вложени.

Вижте wiki раздела на 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';
  });

parent.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