在离子框架中设置子视图和路线

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