Angular UI-Router Ui-View in Ui-View

Ich habe ui-view in index.html und ich habe eine Seite für Informationen und dort möchte ich zweite Ui-View mit 4 Links setzen.Angular UI-Router Ui-View in Ui-View

In meiner index.html

<body ng-app="myApp"> 
    <div ui-view></div> 
</body>

Das ist meine Information. Ich möchte Standard in info.html eine Seite info-Nummer.html öffnen.

<div class="col-sm-8" style="border:1px solid; min-height: 
    <h1>Some text</h1> 
    <div ui-sref></div> 
</div>

Dies ist meine App.

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/home'); 
    $stateProvider 
    .state("home", { 
     url: "/home", 
     templateUrl: "home.html" 
    }) 
    .state("info", { 
     url: "/info", 
     templateUrl: "info.html", 
    }) 
    .state("info-number", { 
     abstract: true, 
     parent: "info", 
     url: "/info-number", 
     templateUrl: "info-number.html" 
    }) 
    .state("info-about", { 
     parent: "info", 
     url: "/info-about", 
     templateUrl: "info-about.html" 
    }) 
    .state("info-where", { 
     parent: "info", 
     url: "/info-where", 
     templateUrl: "info-where.html" 
    }) 
    } 
]);

Schema meiner Seite für Informationen

Vielen Dank für Hilfe.

Quelle

2017-08-16 mrkibzk

Sie müssen info-number nicht abstract sein, auch wenn es Standard ist.

Ihre abstract Ansicht sollte info sein. Wenn der Benutzer also auf den Link "Info" klickt, können Sie ihn als Standard auf info/info-number umleiten.

Ich würde schreiben Sie es als:

$stateProvider 
     .state("home", { 
      url: "/home", 
      templateUrl: "home.html" 
     }) 
     .state("info", { 
      url: "/info", 
      abstract: true, 
      templateUrl: "info.html", 
     }) 
     .state("info.info-number", { 
      url: "/info-number", 
      templateUrl: "info-number.html" 
     }) 
     .state("info.info-about", {     
      url: "/info-about", 
      templateUrl: "info-about.html" 
     }) 
     .state("info.info-where", {    
      url: "/info-where", 
      templateUrl: "info-where.html" 
     })

Die info.html Struktur ähnlich hat:

<div> 
    <h1>Some Text</h1> 
    <div ui-view></div> 
</div>

Quelle

2017-08-16 09:10:08

Hallo Maxim tnx für Antwort, es funktioniert! – mrkibzk

Angular UI-Router Ui-View in Ui-View

Antwort

Verwandte Themen