Question

我想在离子中创建和管理子视图，但我无法弄清楚如何使其工作，我想使我的登录和仪表板页面成为抽象，所有其他页面是仪表板的子视图：

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

我认为我的问题是我的root ion_nav_view指令，但我不确定，是否有任何建议如何使其工作？

index.html＆gt;＆gt;

<body ng-app="modiran">

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

</body>

partials / login.html＆gt;＆gt;

<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＆gt;＆gt;

<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＆gt;＆gt;

 .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

尝试以下更改：

从name="menuContent"移除<ion-nav-view>。为什么？ login州没有指定应加载模板的位置，默认情况下，它会加载到唯一可用的<ion-nav-view>中，而不是名称。如果您想添加它，请按以下方式添加：
```
views: {
  'menuContent': {
    templateUrl: "partials/login.html",
    controller: 'SignInCtrl'
  }
}
```
同样适用于dashboard。为了简单起见，请避免提供name，除非您有多个导航视图可以加载模板。
您的登录状态不应该是抽象状态，因为您要显示登录页面。
您可能需要检查用户是否已登录，并有条件地显示login或dashboard。您可以在app.run区块中执行此操作。

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

1 个答案: