Угловой ui-router: сохраняйте одинаковый ui-view для ребенка

Question

Мне нужно, чтобы дочернее состояние могло использовать функции разрешения родительского состояния. Но мне также нужно сохранить тот же ui-view для обоих состояний. Вот fiddle. И есть код

$stateProvider 
     .state('parent', { 
      url: "/", 
      template: '<p>Hello {{parent.one}}</p><br>' 
        + '<button ng-click="goToChild()">child</button><br>', 
      // this one below work but I don't need it 
      // template: '<p>Hello {{parent.one}}</p><br>' 
      //  + '<button ng-click="goToChild()">child</button><br>' 
      //  + '<div ui-view></div>', 
      resolve: { 
       test: function() { 
        return 1; 
       } 
      }, 
      controller: function($scope, $state, test) { 
       $scope.parent = { one: test }; 
       $scope.goToChild = function() { 
        $state.go('parent.child'); 
       } 
      } 
     }) 
     .state('parent.child', { 
      url: "/child", 
      template: '<p>Hello {{child.one}}</p>', 
      controller: function($scope, test) { 
       $scope.child = { one: test }; 
      } 
     }) 
    $urlRouterProvider.otherwise('/'); 

Answer 1

Существует a working plunker.

Ответ должен быть скрыт/раскрывается в этом определении двух состояний:

родителя с несколькими видами

.state('parent', { 
    url: "/", 
    views: { 
     '@': { 
     template: '<div ui-view=""></div>', 
     controller: function($scope, $state, test) { 
      $scope.parent = { one: test }; 
      $scope.goToChild = function() { 
      $state.go('parent.child'); 
      } 
     } 
     }, 
     '@parent': { 
     template: '<p>Parent says: hello <pre>{{parent | json}}</pre></p>' 
       + '<br><button ng-click="goToChild()">child</button><br>', 
     } 
    }, 
    resolve: { 
     test: function() { return 1; }, 
    }, 
    }) 

Ребенок потребляя родительское решение, и имеет свой собственный

.state('parent.child', { 
    url: "^/child/:id", 
    template: '<p>Child says: hello <pre>{{child | json }}</pre></p>', 
    resolve: { 
     testChild: function() { return 2; }, 
    }, 
    controller: function($scope, test, testChild) { 
     $scope.child = { 
     one: test, 
     two : testChild, 
     parent: $scope.parent, 
     }; 
    }, 
    }) 

Проверьте это here

И как это работает? Ну, все это основано на:

Scope Inheritance by View Hierarchy Only

Имейте в виду, что свойства сферы применения только наследуют вниз государственной цепи если взгляды ваших состояний вложенными. Наследование свойств области не имеет ничего общего с вложения штатов и все, что связано с вложением ваших взглядов (шаблонов).

Вполне возможно, что у вас есть вложенные штаты, шаблоны которых заполняют ui-виды в разных не вложенных местах вашего сайта. В этом случае вы не можете ожидать доступа к переменным области родительского состояния просмотров в представлениях детей.

, а также:

View Names - Relative vs. Absolute Names

За кулисами, каждый вид получает назначение абсолютное имя, которое следует схема viewname@statename, где ViewName это имя, используемое в директиве просмотра и имя состояния - это абсолютное имя состояния, например contact.item. Вы также можете написать имена имен в абсолютном синтаксисе.

Например, предыдущий пример можно также записать в виде:

.state('report',{ 
    views: { 
     'filters@': { }, 
     'tabledata@': { }, 
     'graph@': { } 
    } 
    }) 

Таким образом, выше документация приводит являются ядром plunker. Родитель использует несколько просмотров, один из них не указан - и будет использоваться для наследования. Родитель также вводит в это представление свое собственное «родительское» представление. Разрешение родителя на месте ...

Ребенок теперь вводит в якорь своего родителя, у которого есть все необходимое. Это означает, что этот ребенок наследует область действия и также разрешает вещи.Он также показывает свое собственное ...