Question

我已经开始了Ionic Tabs项目。现在我有一个按钮“initiateProcess”，我用ng-click调用它并在控制器内执行一些操作，然后通过tab.target或{转到某个状态（state.go）完成它{1}}。

但是，当我在tabs.html中不包含该状态时，将不会加载状态。当我确实包含它时，state.go工作正常。这个状态是独立的（可以看作是一个子状态但不是本身），我不希望它显示在我的标签中。

发生了什么事？

tabs.html（不含state.transitionTo）

tab.target

app.js

<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">


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

  // when I include here Target Tab with <ion-nav-view name = "tab.target" ... then it works


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


</ion-tabs>

DashController中的

函数（// Ionic Starter App // angular.module is a global place for creating, registering and retrieving Angular modules // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) // the 2nd parameter is an array of 'requires' // 'starter.services' is found in services.js // 'starter.controllers' is found in controllers.js angular.module('starter', ['ionic', 'ngCordova', 'ionic.utils', 'starter.controllers', 'starter.controllers-cloaking', 'starter.services']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } }); }) .config(function($stateProvider, $urlRouterProvider) { // Ionic uses AngularUI Router which uses the concept of states // Learn more here: https://github.com/angular-ui/ui-router // Set up the various states which the app can be in. // Each state's controller can be found in controllers.js $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.dash', { url: '/dash', views: { 'tab-dash': { templateUrl: 'templates/tab-dash.html', controller: 'DashCtrl' } } }) .state('tab.target', { url: '/target', views: { 'tab-target': { templateUrl: 'templates/tab-target.html', controller: 'TargetCtrl' } } }) .state('tab.account', { url: '/account', views: { 'tab-account': { templateUrl: 'templates/tab-account.html', controller: 'AccountCtrl' } } }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/tab/dash'); });已被注入）

$state

tab-dash.html

中的

按钮

 $scope.initiateProcess = function() {

        // some stuff

        $state.go('tab.target')

    }

Answer 1

通过禁用$ urlRouterProvider.otherwise（）来检查您的路由器是否真的有效。因为它会自动将您路由回tab.dash，这似乎是路由器错误。

如果您的网址确实更改为标签/目标/，这意味着您的路由器确实正常工作。试试这个。

   <ion-tab title="Status" icon-off="ion-ios7-pulse" icon-on="ion-ios7-pulse-strong" href="#/tab/target">
        <ion-nav-view name="tab-target"></ion-nav-view>
      </ion-tab>

.state('tab.target', {
    url: '/target',
   'tab-target': {
      templateUrl: 'templates/tab-target.html',
      controller: 'TargetCtrl'
    }
  })

ion-nav-view就像ios中的UIViewController。它是您视图的容器。如果您决定对其进行命名，则必须匹配$ stateProvider中的视图名称。基本上离子是困惑你想在哪里显示tabs.target，因为没有匹配的容器

Answer 2

我遇到了类似的问题，我试图去找一个没有标签的视图，就像你一样。

解决方案很简单：

定义目标状态时，没有标签的那个：

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

只需将“views”的值设置为具有选项卡的另一个状态，例如：

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

然后，当用户浏览目标选项卡时，在选项卡栏中，“短划线”选项卡将显示为实际选项卡。

Ionic中的$ state.go with ion-nav-view不起作用

2 个答案: