Angular-UI-Router - Blick in eine Geerbte Zustand

edit: auf der Grundlage der Antwort von @actor2019 will ich update meine Frage besser zu erklären, das problem:

Mit Angular-UI-Router(v0.0.2), ich habe setup die app, um richtig navigieren Sie zwischen den "Seiten"/Staat, während die Erben der base Stand.

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>

Das Problem ist hier in der app.js Datei. Wenn ich die views parameter der base Zustand, alles funktioniert(100% leere Seite). Ohne parameter, wird die Seite richtig gerendert wurde, aber ich habe keinen search-Ansicht.

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"
  });

Wie kann ich das hinzufügen von Ansichten zu diesem übergeordneten "Basis" - Zustand?

Angular-UI-Router - Blick in eine Geerbte Zustand

UPDATE:
Das problem mit @actor2019 Antwort hier ist, dass die search Ansicht wird neu initialisiert, wenn sich der Status ändert. Ich würde gerne die Ansichten von der Basis-Ebene zu ertragen, mit denen sich der Zustand ändert.

InformationsquelleAutor der Frage JT703 | 2013-08-27

24

Der erste offensichtliche Fehler:

Können Sie nicht angeben, controller und template auf den Staat, während Ihre mit Blick auf. Sie schließen sich gegenseitig aus...

Dies ist, weil, wenn es keine "Ansichten", sondern ein controller und eine Vorlage über den Zustand, UI-Router erstellt automatisch die "Ansichten" - Eigenschaft und zieht diese Eigenschaften auf einer "leeren" Blick...
```
.state('base', {
  abstract: true,
  templateUrl: 'views/base.html', //Can't do this
  views: { //when this is there.
    "search": {
      templateUrl: "views/search.html"
    }
  }
})
```
Stattdessen tun:
```
.state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search": {
        templateUrl: "views/search.html"
      }
    }
  })
```
Zweite problem:

Ansichten, wie targeting funktioniert auch mit verschachtelten Ansichten etc. ist nicht sehr logisch, es kann gut funktionieren, wenn Sie beschränken Sie Ihre selbst zu einer Ansicht in eine Ansicht ganz nach unten, aber diejenigen, die Sie starten, arbeiten mit mehreren benannten Ansichten es wird alles verwirrend... Hinzufügen Unbenannte Aussicht oben auf, und viele Menschen verloren...

Den Weg Aussicht auf Arbeit im UI-Router ist der Schlimmste Teil des UI-Router...

Gegeben, Sie Beispiel ich bin noch nicht einmal ganz sicher, ob der Weg zum Ziel die Suche nach anzeigen aus Ihrer abstrakten übergeordneten staatlichen... Könnte sein:
```
.state('base', {
  abstract: true,
    views: {
      "": {
        templateUrl: 'views/base.html'
      },
      "search@base": {
        templateUrl: "views/search.html"
      }
    }
  })
```
Wenn es kann sogar arbeiten... Alternativ können Sie die Suche nach anzeigen aus base.html aber ich denke, Sie fügte hinzu, es in es für einen Grund.

Die ganze view-Konzept ist der größte Grund, warum ich am Ende schreiben https://github.com/dotJEM/angular-routing statt.

InformationsquelleAutor der Antwort Jens

Den kindlichen Zustand sein sollte home.search statt header.search. In Ihrem Fall, Sie können schreiben will abstract Zustand zu halten, das layout,

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>

in 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'
            }
        }})

InformationsquelleAutor der Antwort maow

3

Nach dem ui-router Dokumentationwenn die Anwendung in einen bestimmten Zustand—wenn ein Staat "active"—alle seine Vorfahren Staaten sind implizit auch aktiv. So, zum Beispiel, wenn die "Kontakte.Liste" Zustand aktiv ist, wird die "Kontakte" - Zustand ist implizit auch aktiv, weil es die Eltern in den Zustand "Kontakte.Liste". Kind Mitgliedstaaten laden Ihre Vorlagen in der Eltern-ui-view. Ich würde empfehlen, die Suche über den Abschnitt Ihrer Dokumentation berechtigt Verschachtelte Zustände & Blick auf zu gewinnen ein besseres Verständnis von, wie Sie dies tun.

In dem code, den Sie uns gegeben haben, hier, den übergeordneten Status der such-Vorlage ist homewährend
```
.state('header.search', {
    templateUrl: "views/search.html",
    controller: "SearchCtrl"
})
```
bedeutet, dass der übergeordnete Staat die Suche Vorlage sollte header um die Ansicht zu erhalten, ordnungsgemäß geladen. Also glaube ich, dass die folgenden änderungen an Ihrem app.js wird das Problem lösen.

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"
  });
```
InformationsquelleAutor der Antwort drdalton

Dies funktioniert für mich.

$stateProvider
    .state('base', {
      abstract: true,
      url:'/',
      templateUrl: 'views/base.html'
    })
    .state('base.home', {
      url: "",
      views: {
      "search@base": {
        templateUrl: "views/searchOfHome.html"
      }
      //content@base, contentOfHome.html
    }
    })
    .state('base.page2', {
      url: "page2",
      views: {
      "search@base": {
        templateUrl: "views/searchOfPage2.html"
      }
      //content@base, contentOfPage2.html
    });

Wenn 'base' ist der root-Zustand, die Sie nicht brauchen, die '@base'

InformationsquelleAutor der Antwort maow

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Der erste offensichtliche Fehler:

Zweite problem: