2017-08-11 1 views
0

Ich habe durch mehrere ähnliche Fragen hier auf diesem und habe immer noch nicht herausfinden, was ich falsch mache. Ich möchte eine Ansicht in eine Ansicht laden (die sich auch in einer anderen Ansicht befindet).Angular UI Router verschachtelte Ansichten zeigen nichts

Der Code in rules.html wird nicht angezeigt. Missverstehe ich die Konzepte hinter dem UI-Router?

Im firefox Entwicklerkonsole ich bin einfach <!-- uiView: rules --> bekommen

index.html

<body ng-app="App"> 
    <div class="container" ui-view="container" ></div> 
</body> 

Parent.html

<div> 
    //some wrapper stuff 
    <div ui-view="parent"></div> 
</div> 

edit-entity.html

<div ng-controller="ProjectManagerController as data"> 
     // other code showing fine 
     <div ui-view="rules"></div> 
     // other code showing fine 
</div> 

rules.html

<div>TEST CODE</html> 

app.js

$stateProvider 
    .state('app', { 
     views: { 
      'container': { 
       templateUrl: 'views/parent.html?nd=' + Date.now(), 
       controller: 'MainController as data' 
      } 
     } 
    }) 
    .state('edit-entity', { 
     parent: 'app', 
     url: '/entity/{id:int}/edit', 
     views: { 
      'parent': { 
       templateUrl: 'views/entity-edit.html?nd=' + Date.now(), 
       controller: 'MainController as main' 
      } 
     } 
    }) 
    .state('rules', { 
     parent: 'edit-entity', 
     views: { 
      'rules': { 
       templateUrl: 'views/rules.html?nd=' + Date.now(), 
       controller: 'MainController as data' 
      } 
     } 
    }); 

EDIT: Ich habe versucht, auch rules.entity

+0

Hat meine Lösung Ihr Problem lösen? –

Antwort

0

Können Sie versuchen, ob das funktioniert -

.state('rules', { 
    parent: 'edit-entity', 
    views: { 
     '[email protected]': { 
      templateUrl: 'views/rules.html?nd=' + Date.now(), 
      controller: 'MainController as data' 
     } 
    } 
}); 

Ich habe gerade das '@' nach dem Namen der Ansicht (absolute Namensgebung) hinzugefügt. Sie können hier mehr lesen - https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names. Ich habe festgestellt, dass dies manchmal für mich funktioniert.

+0

danke für die hilfe aber leider keine freude. Ich hatte so etwas früher schon mal ausprobiert. Sehr eigenartig! – Adrian

1

Sie müssen den Pfad in einem verschachtelten Zustand vom übergeordneten Status verfolgen. Edit: Ich habe eine Plunker für Ihre Arbeit hinzugefügt: http://plnkr.co/edit/mBYdUTEkaLsqhI6MNW4I?p=preview

.state('app', { 
    views: { 
     'container': { 
      templateUrl: 'views/parent.html?nd=' + Date.now(), 
      controller: 'MainController as data' 
     }, 
     '[email protected]': { 
      templateUrl: 'views/entity-edit.html?nd=' + Date.now(), 
      controller: 'MainController as main' 
     } 
     '[email protected]': { 
      templateUrl: 'views/rules.html?nd=' + Date.now(), 
      controller: 'MainController as data' 
     } 
    } 
}); 
+0

Danke, aber bist du dir sicher, dass das völlig korrekt ist? Ich bin ein wenig verloren, warum 'edit-entity' ein Elternteil von' app' ist und auch nicht sicher ist, wo diese Reihenfolge von 'container.parent.rules.edit-entity' kommt, sollte es nicht 'container.parent sein. edit-entity.rules'? – Adrian

+0

@Adrian so leid, die Eltern waren ein Tippfehler. Ich habe es aktualisiert –

Verwandte Themen