2016-08-14 60 views
0

我是Ionic和AngularJS的初学者。我试图在我的Ionic应用程序中显示位置文件,但此页面上的内容未显示;但URL正在改变。提前致谢。页面不显示[Ionic]

服务到文件

<a class="item item-icon-left " href="#/tab/locations"> 
     <i class="icon ion-search"></i> 
     Near Places 
</a> 

App.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 

    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
     cordova.plugins.Keyboard.disableScroll(true); 

    } 
    if (window.StatusBar) { 

     StatusBar.styleDefault(); 
    } 
    }); 
}) 

.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 

    .state('tab', { 
    url: '/tab', 
    abstract: true, 
    templateUrl: 'templates/tabs.html' 
    }) 


    .state('tab.dash', { 
    url: '/dash', 
    views: { 
     'tab-dash': { 
     templateUrl: 'templates/tab-dash.html', 
     controller: 'DashCtrl' 
     } 
    } 
    }) 

    .state('tab.locations', { 
     url: '/locations', 
     views: { 
     'tab-locations': { 
      templateUrl: 'templates/tab-locations.html', 
      controller: 'LocationCtrl' 
     } 
     } 
    }) 

    .state('tab.chats', { 
     url: '/chats', 
     views: { 
     'tab-chats': { 
      templateUrl: 'templates/tab-chats.html', 
      controller: 'ChatsCtrl' 
     } 
     } 
    }) 
    .state('tab.chat-detail', { 
     url: '/chats/:chatId', 
     views: { 
     'tab-chats': { 
      templateUrl: 'templates/chat-detail.html', 
      controller: 'ChatDetailCtrl' 
     } 
     } 
    }) 

    .state('tab.search', { 
    url: '/search', 
    views: { 
     'tab-search': { 
     templateUrl: 'templates/tab-search.html', 
     controller: 'AccountCtrl' 
     } 
    } 
    }); 


    $urlRouterProvider.otherwise('/tab/dash'); 

}); 

文件名:制表locations.html

<ion-view view-title="location"> 
<ion-content> 
<div class="list list-inset"> 
    <label class="item item-input"> 
    <i class="icon ion-search placeholder-icon"></i> 
    <input type="text" placeholder="Search"> 
    </label> 
</div> 
</ion-content> 

Tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive"> 

    <!-- Dashboard Tab --> 
    <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash"> 
    <ion-nav-view name="tab-dash"></ion-nav-view> 
    </ion-tab> 

    <!-- Chats Tab --> 
    <ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats"> 
    <ion-nav-view name="tab-chats"></ion-nav-view> 
    </ion-tab> 

    <!-- Account Tab --> 
    <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account"> 
    <ion-nav-view name="tab-account"></ion-nav-view> 
    </ion-tab> 


</ion-tabs> 
+0

你是否'tab'状态模板有'ui-view =“tab-locations”'? –

+0

制表符状态模板? – Anoop

+0

是的,你可以在这里添加问题吗? –

回答

1

为了使tab.locations状态下工作,你需要在templates/tabs.html添加新的选项卡Location。此外,它还应该有name="tab-locations",以便tab.locations可以在其中放置模板。

<ion-tab title="Locations" icon-off="ion-ios-gear-outline" 
icon-on="ion-ios-gear" href="#/tab/account"> 
    <ion-nav-view name="tab-locations"></ion-nav-view> 
</ion-tab> 
+0

谢谢你。它正在工作。我花了整整一天。 – Anoop

+0

@Anoop np,很高兴听到它帮助,谢谢:-) –