Question

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

致电位置文件

<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');

});

文件名：tab-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>

Answer 1

要使tab.locations州生效，您需要在Location中添加新标签templates/tabs.html。此外，它还应该有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>

页面未显示[Ionic]

1 个答案: