Einrichten von Unteransichten und Routen im ionischen Rahmen

Ich möchte Unteransichten in ionic erstellen und verwalten, aber ich konnte nicht herausfinden, wie es funktioniert. Ich möchte meine Login- und Dashboard-Seiten als abstrakt und alle anderen gestalten werden Seiten die Unteransichten Armaturenbrett:Einrichten von Unteransichten und Routen im ionischen Rahmen

zum Beispiel: dashboard.fax oder dashboard.inbox oder dashboard.fax.send

ich mein Problem denke, ist meine Wurzel ion_nav_view Richtlinie, aber ich bin mir nicht sicher, jeder Vorschlag Wie funktioniert es?

index.html >>

<body ng-app="modiran"> 

<ion-nav-view name="menuContent"></ion-nav-view> 
<!--<div data-ui-view="menuContent"></div>--> 

</body>

partials/login.html >>

<ion-view view-title="login"> 
    <ion-pane> 
    <div class="login"> 
    <ion-content padding="true" scroll="false" ng-controller="SignInCtrl"> 
     <div style="margin-top: 90%"> 
     <div class="list list-inset login_inputs"> 
      <label class="item item-input item-icon-right item-input-wrapper"> 
      <i class="icon ion-person placeholder-icon"></i> 
      <input type="text" ng-model="user.username" placeholder="username" class="text-right"> 
      </label> 
     </div> 
     <div class="list list-inset login_inputs"> 
      <label class="item item-input item-icon-right item-input-wrapper"> 
      <i class="icon ion-locked placeholder-icon"></i> 
      <input type="password" ng-model="user.password" placeholder="password" class="text-right padding-right"> 
      </label> 
     </div> 

     <button class="item button button-block button-dark" ng-disabled="!user.username || !user.password" 
       ng-click="signIn(user)">login 
     </button> 
     </div> 
    </ion-content> 
    </div> 
    </ion-pane> 
</ion-view>

partials/dashboard.html >>

<ion-view view-title="dashboard"> 
    <ion-pane> 

    <ion-header-bar class="bar bar-header bar-dark" align-title="right"> 
     <button class="button"><img src="img/navcon-logo.png" style="width: 35px; height:35px;"/></button> 
     <h1 class="title">modiran</h1> 
    </ion-header-bar> 

    <ion-content has-header="true" scroll="false" ng-controller="DashboardCrtl"> 
     <div style="margin-top: 90%" class="dashboard"> 
     <!--<i class="dash-icon"><img src="../img/24.png" style="width: 60%;height: 60%;"></i>--> 
     <img ng-src="img/Menubtn.png" style="width: 5%;height: 5%;margin-top: -8%;float: left;"> 
     <img ng-src="img/MenubtnR.png" style="float: right;width: 5%;height: 5%;margin-top: -8%;"> 

     <div class='circle-container'> 
      <a class='center' ng-click="GoTo('SmartOffice')"><img src="img/24.png"></a> 
      <a class='deg0'> 
      <img src='img/3.png' 
       onmouseover="this.src='img/3sel.png'" 
       onmouseout="this.src='img/3.png'"> 
       <!--onmouseover="this.src='../img/3sel.png'"--> 

      </a> 
      <a class='deg45'> 
      <img src='img/4.png' 
       onmouseover="this.src='img/4sel.png'" 
       onmouseout="this.src='img/4.png'"> 
      </a> 
     </div> 

     </div> 


    </ion-content> 

    </ion-pane> 
</ion-view>

app.js >>

.config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('login', { 
     url: '/login', 
     abstract: true, 
     templateUrl: 'partials/login.html', 
     controller: 'SignInCtrl' 
     }) 

     .state('dashboard', { 
     url: '/dashboard', 
     abstract : true, 
     templateUrl: "partials/dashboard.html", 
     controller: 'DashboardCrtl' 
     }) 

     .state('dashboard.SmartOffice', { 
     url: '/SmartOffice', 
     views: { 
      'menuContent': { 
      templateUrl: "partials/SmartOffice.html", 
      controller: 'SmartOfficeCtrl' 
      } 
     } 
     }) 

     .state('dashboard.Fax', { 
     url: '/Fax', 
     views: { 
      'menuContent': { 
      templateUrl: "partials/fax/Fax.html", 
      controller: 'ّFaxCtrl' 
      } 
     } 
     }) 


    $urlRouterProvider.otherwise('/login'); 
    })

Quelle

2016-07-19 anonymox

Versuchen Sie, die folgenden Änderungen:

entfernen name="menuContent" vom <ion-nav-view>. Warum? login Der Status gibt nicht an, wo die Vorlage geladen werden soll, standardmäßig wird nur der Name <ion-nav-view> ohne Namen geladen. Falls Sie es hinzufügen möchten, fügen Sie es auf diese Weise:
```
views: { 
    'menuContent': { 
    templateUrl: "partials/login.html", 
    controller: 'SignInCtrl' 
    } 
} 
```
Ebenso für dashboard. Um es einfach zu halten, vermeiden Sie es, name anzugeben, es sei denn, Sie haben mehr als eine Navigationsansicht, in der Vorlagen geladen werden können.
Ihr Anmeldestatus sollte nicht abstrakt sein, da Sie die Anmeldeseite anzeigen möchten.
Möglicherweise müssen Sie überprüfen, ob der Benutzer angemeldet ist oder nicht und zeigen Sie login oder dashboard. Sie können dies in app.run Block tun.

Quelle

2016-07-19 12:50:01

danke für die antwort, also wann sollte ich eine abstrakte ansicht erstellen? und wie sollte ich Unteransichten verwalten? – anonymox

Ihr Dashboard als abstrakter Status und seine untergeordneten Status sind ein gültiges Beispiel. Sie können [hier mehr lesen] (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states). –

Einrichten von Unteransichten und Routen im ionischen Rahmen

Antwort

Verwandte Themen