Vue imbriquée angulaire du routeur ui

Question

J'essaie d'injecter une vue imbriquée dans ma vue normale, en utilisant ui-router.Je sais que c'est possible en faisant ng-include.Mais je veux le résoudre en utilisant ui-router.

Mon HTML est le suivant :

<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">Project todos</div>
                <div class="panel-body">
                    <div ui-view="todos"></div>
                </div>
            </div>
        </div>
    </div>

Ensuite, dans mon script, j'ai obtenu un état :

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos': {
       templateUrl: 'views/project/todos.html'
      }
   }
})

Mise à jour - n'y a-t-il pas quelque chose comme ça possible ?

.state('project', {
   url: '/project/:projectId',
   templateUrl: 'views/project/project.html',
   controller: 'ProjectCtrl',
   views: {
      'todos@project': {
         templateUrl: 'views/project/todos.html'
      }
   }
})

Quelqu'un peut-il trouver une faute de frappe ou autre ?J'ai lu la documentation.Je ne suis pas sûr de ce qui ne va pas.

Merci d'avance!

Answer 1

Il y a un travail plongeur, montrant comment nous pouvons le faire fonctionner

Sur le fichier index.htm, nous devons avoir le <div ui-view="" ></div>, c'est à cet endroit que nous avons injecté le project.html.Ensuite, nous ajustons la définition de l'état, pour injecter également une vue imbriquée - en utilisant ui-view dénomination absolue :

  .state('project', {
    url: '/project/:projectId',

    views: {
      '' : {
        templateUrl: 'views.project.project.html',
        controller: 'ProjectCtrl',
      },
      'todos@project': {
        templateUrl: 'views.project.todos.html'
      }
    }
  });

Le nom absolu todos@project, injectera le todos.html dans le project.html.Vérifier la plongeur

Voir le:

• Afficher les noms – Relatif vs.Noms absolus

Une citation :

...En coulisses, chaque vue se voit attribuer un nom absolu qui suit un schéma de viewname@statename, où viewname est le nom utilisé dans la directive view et state name est le nom absolu de l'état, par ex.contact.item.Vous pouvez également choisir d'écrire vos noms de vues dans la syntaxe absolue...