Verschachtelte Ansicht in mehreren Ansichten mit ui Router angularjs

Ich habe mehrere Ansichten auf einer Seite und innerhalb einer Ansicht habe ich verschachtelte view.Wie soll ich dies in app.js.Given unten ist mein Code, der nicht funktioniert.
Dies ist meine Datei index.htmlVerschachtelte Ansicht in mehreren Ansichten mit ui Router angularjs

<body ng-app="configuratorApp" > 
    <div ui-view="view1"></div> 
    <div ui-view="view2"></div> 
</body>

Diese

meine view1.html Datei ist

<div ui-view> </div> 
<button type="button" ui-sref="view1.child1"></button> 
<button type="button" ui-sref="view1.child2"></button>

Das ist mein view1-child1.html Datei

<h1>Child1<h1>

Das ist mein view1 -child2.html Datei

<h1>Child2<h1>

Das ist mein view2.html Datei

<h1>Hello World</h1>

Das ist mein app.js Datei ist

.state('home',{ 
    url: '/', 
    views: { 
     '': { 
      templateUrl: 'index.html' 
     }, 
     '[email protected]': { 
      templateUrl: 'view1.html' 
     },'[email protected]': { 
      templateUrl: 'view2.html' 
     } 
     } 
}) 
.state('view1.child1', { 
     url: '/child1', 
     templateUrl: 'view1-child1.html' 
    }) 
.state('view1.child2', { 
     url: '/child2', 
     templateUrl: 'view1-child2.html' 
    })

Quelle

2016-07-29 sameedhayat

Sie verwechseln die Ansichten mit den Staaten.

Es gibt keinen view1.child1 Status, Grund ist, dass Sie keinen view1 als Elternstatus haben (außer der Code, den Sie oben veröffentlicht haben, ist unvollständig). Der Name sollte stattdessen home.child sein.

.state('home.child1', { //this should be home.child1 instead of view1.child1 
    url: '/child1', 
    templateUrl: 'view1-child1.html' 
}) 
.state('home.child2', { 
    url: '/child2', 
    templateUrl: 'view1-child2.html' 
})

tragen auch daran, dass Sie ein Root-Vorlage benötigen (oder unbenannte Root-Template) in Ihrem index.html, sonst Ihre home Staat kann nicht belegt werden.

Also in Ihrem index.html, müssen Sie dies haben:

<body ng-app="configuratorApp"> 
    <div ui-view></div> <!--this is the root template, to let Home state 'live' here--> 
</body>

Hier ist die Arbeits plnkr

P. S. Wenn der PLNKR nicht funktioniert, aktualisiere ihn einfach. Manchmal hat es Probleme, die htmls

zu holen

Quelle

2016-07-29 07:07:51 CozyAzure

Verschachtelte Ansicht in mehreren Ansichten mit ui Router angularjs

Antwort

Verwandte Themen