Question

enter image description here我是Ionic v-1的新手。我尝试使用父子关系实现导航。父州是＆＃34; tab＆＃34;而活跃的孩子状态是＆＃34; home＆＃34;。当我加载应用程序时，主页状态内容不会加载。

＆＃13;

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider,$urlRouterProvider){
  $stateProvider
    .state('tabs',{
      url:"/tab",
      abstract:true,
      templateUrl:"templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.addFriend',{
      url:"/addFriend",
      views:{
        'addFriend-tab':{
            templateUrl:"templates/addFriend.html",
            controller:'addFriendTabController'
        }
      }
    })
    .state('tabs.message',{
      url:"/message",
      views:{
        'message-tab':{
            templateUrl:"templates/message.html",
            controller:'messageTabController'
        }
      }
    })
    .state('tabs.notifications',{
      url:"/notifications",
      views:{
        'notifications-tab':{
            templateUrl:"templates/notifications.html",
            controller:'notificationsTabController'
        }
      }
    })
    .state('tabs.profile',{
      url:"/profile",
      views:{
        'profile-tab':{
            templateUrl:"templates/profile.html",
            controller:'profileTabController'
        }
      }
    });
    $urlRouterProvider.otherwise("/tab/home");
})

.controller('HomeTabCtrl',function($scope){
    console.log("Home tab");
})
.controller('addFriendTabController',function($scope){
    console.log("addFriend tab");
})
.controller('messageTabController',function($scope){
    console.log("message tab");
})
.controller('notificationsTabController',function($scope){
    console.log("notifications tab");
})
.controller('profileTabController',function($scope){
    console.log("profile tab");
});

＆＃13;

  <body ng-app="starter">

    <ion-pane>
      <div class="bar bar-positive item-input-inset headerBorder">          
          <label class="item-input-wrapper positive-bg" id="headerSearch">
            <i class="icon ion-ios-search placeholder-icon searchIcon"></i>
            <input type="search" placeholder="People, jobs, posts and more...">
          </label>
          <a href="#"><i class="icon ion-grid placeholder-icon searchIcon"></i></a>
      </div>

      <ion-nav-view></ion-nav-view>

      <script id="templates/tabs.html" type="text/ng-template">
          <div class="tabs-stripped tabs-top tabs-background-positive tabs-color-light">
            <div class="tabs tab-top">
              <a href="#/tab/home" class="tab-item active">
                <i class="icon ion-home"></i>
              </a>
              <a href="#/tab/addFriend" class="tab-item">
                <i class="icon ion-person-stalker"></i>
              </a>
              <a href="#/tab/message" class="tab-item">
                <i class="icon ion-chatboxes"></i>
              </a>
              <a href="#/tab/notifications" class="tab-item">
                <i class="icon ion-android-notifications"></i>
              </a>
              <a href="#/tab/profile" class="tab-item">
                <i class="icon ion-person"></i>
              </a>
            </div>  
          </div>   
      </script> 

      <script id="templates/home.html" type="text/ng-template">
          <ion-content class="has-tabs-top">
            <div class="list card">
              <div class="item item-thumbnail-left">           
                <img src="img/ionic.png">
                <h2 class="listCss">Name</h2>
                <h3>Followers</h3>
                <p>Time</p>          
              </div>
              <div class="item item-image">
                <img src="img/NIKHIL.jpg">
              </div>  
              <a href="#" class="item assertive">Click here...</a>
            </div>        
          </ion-content>
       </script>

       <script id="templates/addFriend.html" type="text/ng-template">

       </script>

       <script id="templates/message.html" type="text/ng-template">

       </script>

       <script id="templates/notifications.html" type="text/ng-template">

       </script>

       <script id="templates/profile.html" type="text/ng-template">

       </script>
    </ion-pane>
  </body>

＆＃13;

Answer 1

如果你想使用多个命名视图，你可以这样做，例如：

你的HTML：

upper

在你的JS中：

<ion-tabs class="tabs-icon-bottom tabs-color-light tabs-background-brown">
    <ion-tab title="LAST SCAN" icon-off="fwd-last-scan-off" icon-on="fwd-last-scan-on" ui-sref="tab.lastscan">
        <ion-nav-view name="tab-left"></ion-nav-view>
    </ion-tab>
    <ion-tab title="SCAN" icon-off="fwd-total-scan-off" icon-on="fwd-total-scan-on" ui-sref="tab.scan">
        <ion-nav-view name="tab-center"></ion-nav-view>

    </ion-tab>
    <ion-tab title="MENU" icon-off="fwd-menu-off" icon-on="fwd-menu-on" ui-sref="tab.menu">
        <ion-nav-view name="tab-right"></ion-nav-view>
    </ion-tab>

    <ion-tab title="EXTRA" icon-off="fwd-extra-off" icon-on="fwd-extra-on">
        <ion-nav-view name="tab-off"></ion-nav-view>
    </ion-tab>


</ion-tabs>

Child声明Ionic V-1中没有呈现父状态

1 个答案: