2017-01-21 5 views
0

enter image description here私はイオンのV-1に新たなんだ親の状態でレンダリングしていない状態。私は親子関係を使ってナビゲーションを実装しようとしました。アクティブな子状態が「家」である一方、親状態は「タブ」です。アプリケーションをロードすると、ホーム状態のコンテンツは読み込まれません。あなたが複数の名前付きビューを使用する場合は子はイオン性V-1

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

答えて

0

そうexmapleのためのようにやってきました:

ますHTMLの場合:あなたの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> 

"use strict"; 

angular.module("gestione") 
    .config(["$stateProvider", "$urlRouterProvider", "$ionicConfigProvider", "$httpProvider", "$ionicNativeTransitionsProvider", 
     function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $httpProvider, $ionicNativeTransitionsProvider) { 



      // if none of the above states are matched, use this as the fallback 
      $urlRouterProvider.otherwise("/tab/login"); 



      $stateProvider 
       // setup an abstract state for the tabs directive 
       .state("tab", { 
        url: "/tab", 
        abstract: true, 
        templateUrl: "templates/tabs.html" 
       }) 

       // Each tab has its own nav history stack: 
       .state("tab.lastscan", { 
        url: "/lastscan", 
        cache: false, 
        nativeTransitions: { 
         "type": "filp", 
         "direction": "up" 
        }, 
        views: { 
         'tab-left': { 
          templateUrl: "templates/tab-lastscan.html", 
          controller: "LastScanCtrl", 
          controllerAs: "lastscan" 
         } 
        } 
       }) 
       .state("tab.menu", { 
        url: "/menu", 
        views: { 
         'tab-right': { 
          templateUrl: "templates/tab-menu.html", 
          controller: "MenuCtrl" 
         } 
        } 


      }) 
      .state("tab.settings", { 
       url: "/settings", 
       cache: false, 
       views: { 
        'tab-off': { 
         templateUrl: "templates/settings.html", 
         controller: "SettingCtrl", 
         controllerAs: "settingCtrl" 
        } 
       } 
      }) 
      ; 




    }]); 
+0

のおかげで、それは私のために働きました。 – Nikhil

+0

それはあなたを助け、あなたはプラザのthnx ...それを評価したい場合は! –

関連する問題