Angulaire de l'INTERFACE utilisateur du Routeur - Vues dans Hérité d'un État

edit: en Fonction de la réponse par @actor2019 je veux mettre à jour ma question afin de mieux expliquer le problème:

À l'aide de Angulaire de l'INTERFACE utilisateur du Routeur(v0.0.2), j'ai d'installation de l'application pour bien naviguer entre les principaux "pages"ou d'état, bien qu'il conserve l'état de base.

Index.html:

<div ui-view></div>

base.html:

<!-- Header -->
<div>
    <!-- Header markup -->

    <!-- Search View -->
    <div ui-view="search"></div>
</div>

<!-- Page Content view -->
<div ui-view></div>

Le problème est là dans la app.js fichier. Lorsque j'ajoute le views paramètre à la base état, tout s'arrête de fonctionner(100% vierge de la page). Sans ce paramètre, la page s'affiche correctement, mais je n'ai pas d'affichage de la recherche.

app.js:

$urlRouterProvider.otherwise('/');

//
//Now set up the states
$stateProvider
  .state('base', {
    abstract: true,
    templateUrl: 'views/base.html',
    views: {
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })
  .state('base.home', {
    url: "/",
    templateUrl: "views/home.html"
  })
  .state('base.page2', {
    url: "/page2",
    templateUrl: "views/page2.html"
  });

Comment puis-je ajouter de vues pour cette mère 'de base' état?

Angulaire de l'INTERFACE utilisateur du Routeur - Vues dans Hérité d'un État

Mise à JOUR:
Le problème avec @actor2019 la réponse de ici est que le search vue est réinitialisé lorsque l'état change. J'aimerais que la vue sur l'extérieur de la base au niveau de persister à travers les modifications de l'état.

OriginalL'auteur JT703 | 2013-08-27

  1. 24

    La première erreur évidente:

    Vous ne pouvez pas spécifier le contrôleur et le modèle de l'état et à l'aide de votre point de vue. Ils sont mutuellement exclusifs...

    C'est parce que quand il n'y a pas de "points de vue", mais d'un contrôleur et le modèle de l'état, de l'INTERFACE utilisateur du Routeur crée automatiquement les "vues" de la propriété et tire ces propriétés à un "vide"...

    .state('base', {
  abstract: true,
  templateUrl: 'views/base.html', //Can't do this
  views: { //when this is there.
    "search": {
      templateUrl: "views/search.html"
    }
  }
})

    Au lieu de faire: 

    .state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })

    Deuxième problème:

    La manière dont les vues, les œuvres avec des vues imbriquées etc. n'est pas très logique, il peut bien fonctionner si vous limiter votre auto à un point de vue dans une vue tout le chemin vers le bas, mais vous commencez à travailler avec de multiples vues nommées tout devient confus... Ajouter sans nom vues sur le dessus et beaucoup de gens se perd...

    Le chemin du point de vue de travailler dans l'INTERFACE utilisateur du Routeur est la pire partie de l'INTERFACE utilisateur du Routeur...

    Donné l'exemple, je ne suis pas encore tout à fait sûr de la façon de cibler l'affichage de la recherche de votre résumé à l'état parent... Peut-être:

    .state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search@base": {
        templateUrl: "views/search.html"
      }
    }
  })

    Si il peut encore être fait pour travailler... Sinon, vous pouvez déplacer l'affichage de la recherche de base.html mais je suppose que vous l'avez ajouté dans la là pour une raison.

    De l'ensemble du concept est la principale raison pour laquelle j'ai fini par écrire https://github.com/dotJEM/angular-routing à la place.

    OriginalL'auteur Jens

  2. 4

    L'état d'Enfant doit être home.search au lieu de header.search. Dans votre cas, vous pouvez écrire quelques abstract état de détenir la mise en page,

    base.html

    <div class="row-fluid">
    <div class="header">
        <div class="span3" ui-view="logo"></div>
        <div  class="span9" ui-view="menu"></div>
    </div>
</div>

<div class="row-fluid">
    <div class="content">
        <div class="span2" ui-view="sidebar"></div>
        <div  class="span10" ui-view="entry"></div>
    </div>
</div>

    dans app.js

    $stateProvider
    .state('base',{
        abstract:true,
        url:'/',
        templateUrl: viewBase+'base.html'
    })
    .state('base.main',{
        url:'',
        views:{
            "logo":{
                templateUrl:viewBase+'main/logo.html'
            },
            "menu":{
                templateUrl:viewBase+'main/menu.html'
            },
            "sidebar":{
                templateUrl:viewBase+'main/sidebar.html'
            },
            "entry":{
                templateUrl: viewBase+'main/entry.html'
            }
        }})
    donc, tout ce qui dans les "points de vue" ne peut pas être un parent? Il est à la pointe de la branche de la hiérarchie? dernier enfant?
    vous pouvez définir ui-view dans les points de vue, disons dans main/logo.html mais vous devez utiliser les base.main en tant que parent et ensuite dériver ot de base."comme .state('base.main.NewChildState') {views:{'[email protected]':...}}

    OriginalL'auteur maow

  3. 3

    En fonction de l'interface utilisateur du routeur la documentation, lorsque l'application est dans un état particulier—lorsqu'un etat est "active"—tous de son ancêtre états sont implicitement active. Ainsi, par exemple, lorsque les contacts.la liste" l'état est actif, la rubrique "contacts" de l'état est implicitement actif en tant que bien, parce que c'est le parent de l'état de "contacts.la liste". Enfant, les états charge leurs modèles dans leurs parents ui-view. J'aimerais vous conseille d'en regardant au-dessus de la section de leur la documentation droit Imbriquée Unis & Vues pour obtenir une meilleure compréhension de la façon de le faire.

    Dans le code que vous nous avez fournis ici, le parent de l'état du modèle de recherche est home, tandis que

    .state('header.search', {
    templateUrl: "views/search.html",
    controller: "SearchCtrl"
})

    implique que le parent de l'état de la recherche modèle doit être header pour que la vue de se charger correctement. Donc, je crois que les modifications suivantes à votre app.js permettra de résoudre votre problème.

    app.js

    $stateProvider
  .state('home', {
    url: "/",
    views: {
      '': {
        templateUrl: "views/mainContent.html",
        controller: "MainCtrl"
      },
      'header': {
        templateUrl: "views/header.html"
      },
      'footer': {
        templateUrl: "views/footer.html"
      },
    }
  })
  .state('home.search', {
    views: {
      'search': {
        templateUrl: "views/search.html",
        controller: "SearchCtrl"
      }
  })
  .state('anotherPage', {
    url: "/anotherPage",
    templateUrl: "views/anotherPage.html"
  });
    (+1) Une question de M. Dalton, est home.search automatiquement invoquée, car elle n'a pas de url et les cartes de ses views pour ceux qui sont dans quel état est ? Et si nous avions plus qu'une " ui-view="search" ' tout au long de notre application, nous avons pu limiter home.search à seulement vues dans home l'aide de la normale view@state la syntaxe (en supposant que c'était en fait home.other.state.search et d'un ou de plusieurs des états entre eu un "search" vue)...?

    OriginalL'auteur drdalton