在離子框架中設置子視圖和路線

Question

我想在ionic中創建和管理子視圖，但是我想不通如何使它工作，我想將登錄頁面和儀表板頁面設為抽象，而所有其他頁面都是儀表盤的子視圖：

例如：dashboard.fax或dashboard.inbox或dashboard.fax.send

我認為我的問題是我的根ion_nav_view指令，但是我不確定如何使它起作用的任何建議？

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');
  })

Answer 1

嘗試以下更改：

從<ion-nav-view>刪除name="menuContent" 。 為什么？ login狀態未指定模板的加載位置，默認情況下它將加載在唯一可用的<ion-nav-view> ，且沒有名稱。 如果您要添加它，請按以下方式添加：
```
 views: { 'menuContent': { templateUrl: "partials/login.html", controller: 'SignInCtrl' } } 
```
dashboard 。 為簡單起見，除非您有多個可以加載模板的導航視圖，否則請避免提供name 。
您的登錄狀態不應為抽象狀態，因為您要顯示登錄頁面。
您可能需要檢查用戶是否登錄，並有條件地顯示login或dashboard 。 您可以在app.run塊中執行此app.run 。

在離子框架中設置子視圖和路線

問題描述

1 個解決方案

解決方案1
1 2016-07-19 12:50:01

在離子框架中設置子視圖和路線

問題描述

1 個解決方案

解決方案1 1 2016-07-19 12:50:01

解決方案1
1 2016-07-19 12:50:01