Angular UI-Router Subview Probleme

Ich habe mit Angular für ein Jahr oder 2 jetzt gearbeitet, aber das ist mein erstes Projekt mit UI-Router. Ich habe ein paar Probleme mit Ansichten und Unteransichten. Die App ist eine Standard-Menüleiste auf der linken Seite. Die Ansichten auf der rechten Seite ändern sich je nachdem, was in der Menüleiste angeklickt wurde.Angular UI-Router Subview Probleme

Auf index.html

<body> 
    <div ui-view></div> 
</body>

In der config.js-Datei, die die Routen

.state("dashboard", { 
     url: "/dashboard", 
     templateUrl: "components/dashboard/dashboard.html", 
     data: { 
      pageTitle: "Dashboard", 
      requiresLogin: false 
     } 
    }) 

    .state("dashboard.welcome", { 
     url: "/welcome", 
     templateUrl: "components/welcome/welcome.html", 
     data: { 
      pageTitle: "Welcome", 
      requiresLogin: false 
     } 
    })

<div class="dashboard"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-8"> 
     <div ui-view>

Die /dashboard Streckenlasten definiert In der dashboard.html Datei korrekt, und lädt die linke Navigationsleiste mit einer leeren rechten Seite. Wenn Sie jedoch den Status in dashboard.welcome (/welcome) ändern, wird die Vorlage "welcome.html" nicht geladen.

Quelle

2016-05-06 bluedevil2k

sind Sie sicher, dass Sie URL zu '/ Armaturenbrett/welcome' ändern? –

Sollte es nicht nur "/ welcome" sein, denn das ist das Mapping im Zustand für "dashboard.welcome" – bluedevil2k

no..it wird eine Kombination aus Eltern ('/ armaturenbrett') + Kind ('/welcome') .. –

Wenn Sie mit ui-router arbeiten, müssen Sie verstehen, dass sich das Konzept der Zustände von den Routen unterscheidet. Wenn Sie einen Unterzustand definieren, wird dieser relativ zum übergeordneten Zustand definiert. In Ihrem Szenario ist dashboard.welcome als untergeordneter Status dashboard definiert. Die Routen zu substate sind relativ zum übergeordneten und ist {parent url}/{child url}. Daher sollten Sie eine der folgenden 2 bis Weg zu diesem Zustand verwenden:

$ Mit state.go den Zustand ändern, indem Zustand Namens

$state.go('dashboard.welcome');

$ Mit location.path die Route ändern, indem Angabe url

$location.path('/dashboard/welcome');

Quelle

2016-05-09 17:24:26

https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states. Ich empfehle die verschachtelte URL, aber wenn Sie die absolute URL verwenden müssen, müssen Sie der URL-Zeichenfolge ein spezielles Symbol '^' voranstellen. das ist URL: '^/Willkommen' – pdorgambide

Es klingt wie Sie Links zu /welcome für dashboard.welcome Zustand sein wollen. Hier ist ein Plünderer, der zeigt, wie das gemacht werden kann. Ich zeige zwei Gruppen von Dashboards und Begrüßungsstatus. Der erste Satz von Staaten (Armaturenbrett & Willkommen) zeigt, dass /dashboard/welcome Sie zum dashboard.welcome Zustand bringt.

Der zweite Satz (dashboard2 & welcome2) zeigt, dass /welcome in den Status dashboard2.welcome2 wechselt. Ich glaube, das ist, wonach Sie gesucht haben.

Wenn Sie den Mauszeiger über die Links bewegen, können Sie sehen, wohin sie Sie führen.

https://plnkr.co/edit/AVKPFa?p=info

Quelle

2016-05-12 19:08:49 BatteryAcid

Nested Routen in ui-Router verschachtelt Urls bekommen. Ich würde jedoch empfehlen, benannte Ansichten für diese Art von Struktur zu verwenden. Sie können weitere Informationen über es hier finden:

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

Der Kern ist: Sie eine benannte Komponente (ui-Ansicht) für das linke Menü-Navigation und eine andere für den Inhalt angeben können, die Ihnen viel gibt mehr Kontrolle auf der ganzen Linie, da benannte Komponenten in untergeordneten Zuständen überschrieben werden können oder sie die Standardvorlage beibehalten können, je nach Ihren Anforderungen.

Beispiel:

.state('root', { 
      url: '', 
      abstract: true, 
      views: { 
       'header': { 
        templateUrl: 'templates/partials/header.html', 
        controller: 'headerCtrl' 
       }, 
       'logo': { 
        templateUrl: 'templates/partials/logoView.html' 
       }, 
       'footer':{ 
        templateUrl: 'templates/partials/footer.html', 
        controller: 'footerCtrl' 
       } 
      } 
     }) 
     .state('root.login', { 
      url: '/login', 
      views: { 
       '[email protected]': { 
        template: '' 
       }, 
       '[email protected]': { 
        templateUrl: 'templates/login.html', 
        controller: 'loginController' 
       } 
      } 
     }) 
     .state('root.report', { 
      url: '/report', 
      views: { 
       '[email protected]': { 
        templateUrl: 'templates/eu_dashboard.html', 
        controller: 'reportController' 
       } 
      } 
    })

Und in Ihrer index.html:

<div ui-view="logo"></div> 
<div ui-view="header"></div> 
<div id="mainView" ui-view="container"></div> 
<div ui-view="footer"></div>

Quelle

2016-05-14 14:28:06 Nirri

Angular UI-Router Subview Probleme

Antwort

Verwandte Themen