Ui-routeur angulaire: conservez le même ui-view pour enfant

J'ai besoin d'un état enfant pour pouvoir utiliser les fonctions de résolution de l'état parent. Mais j'ai également besoin de garder la même ui-view pour les deux états. Voici un violon . Et il y a un code

$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('/');

Il y a un plongeur actif .

La réponse doit être cachée / révélée dans cette définition de deux états:

Parent avec plusieurs vues

  .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; }, }, })

Les parents qui s'occupent des enfants résolvent, et ont leur propre

  .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, }; }, })

Vérifiez ici

Et comment ça marche? Eh bien, tout est basé sur:

L'héritage de la portée par la hiérarchie d'affichage uniquement

Gardez à l'esprit que les propriétés de portée héritent uniquement de la chaîne d'état si les vues de vos états sont imbriquées . L'héritage des propriétés de portée n'a rien à voir avec l' imbrication de vos états et tout ce qui concerne l'imbrication de vos vues (modèles).

Il est tout à fait possible que vous ayez des états imbriqués dont les modèles remplissent ui-views à différents emplacements non imbriqués de votre site. Dans ce scénario, vous ne pouvez pas vous attendre à accéder aux variables de portée des vues d' état parent dans les vues des états enfants.

et aussi:

Afficher les noms – Noms relatifs ou absolus

Derrière les scènes, chaque vue reçoit un nom absolu qui suit un schéma de viewname@statename , où viewname est le nom utilisé dans la directive de vue et le nom d'état est le nom absolu de l'état, par exemple contact.item. Vous pouvez également choisir d'écrire vos noms de vues dans la syntaxe absolue.

Par exemple, l'exemple précédent pourrait également être écrit comme suit:

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

Ainsi, la documentation ci-dessus cite est le noyau du plunker . Le parent utilise plusieurs vues, l'un d'entre eux est sans nom – et sera utilisé pour l' héritage . Parent a également injecté dans cette vue sa propre vue "parent". La résolution d'un parent est en place …

L'enfant maintenant injecte dans l'ancre de son parent, qui a toutes les choses nécessaires. Cela veut dire que cet enfant héritera de la portée et résoudra aussi les choses. Cela montre sa propre résolution aussi …