点击离子导航条上的按钮移动到新页面的所有3种方式都不起作用

All 3 ways of moving to new page on click of button in the ionic navbar dont work

本文关键字：新页面 3种不起作用方式按钮导航移动更新时间：2023-09-26

理想情况下，这三种方法都应该工作。下面的代码很好地展示了这三种方法。

正确工作的CodePen Demo app

目前，这三种方法都不起作用;导航条在点击按钮时就消失了(显示空的导航条)，而核心页面仍然是相同的主页面。

我不确定这是一个代码问题，离子问题或只是简单地我不应该从导航栏过渡到一个新的页面。最后一个太不合逻辑了，让人无法接受。

有没有人知道问题在哪里，请帮助我?

我的核心内容代码在index.html

<body animation="slide-left-right-ios7">
        <ion-nav-bar class="bar-light nav-title-slide-ios7"></ion-nav-bar>
        <ion-nav-view></ion-nav-view>

我的按钮html(注意所有3个版本都是单独测试的)

    <ion-view ng-controller="NavCtrl"> 
     <ion-nav-buttons side="left">
      <button class="button button-icon ion-compose" ng-click="create('tab.newpost')"></button>
      <button class="button button-icon ion-compose" ui-sref="tab.newpost"></button>
      <button class="button button-icon ion-compose" href="/tab/newpost"></button>
     </ion-nav-buttons>
     <ion-content class>
        <!-- Rest of the content body here --> 
     </ion-content> 
    </ion-view>

nav.js中的代码主要用于状态。创建方法

app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};
    $scope.create = function(stateName) {
      /* $location.path('/tab/newpost'); */ 
      $state.go(stateName);  /* tried swapping stateName with 'tab.newpost' and func() */
    };
  });

app.js的代码(路由文件)

    var app = angular.module('MyApp', ['ionic','firebase']);
    app.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
        .state('tab', {
          url: '/tab',
          abstract: true,
          templateUrl: 'templates/tabs.html'
        })
        .state('tab.posts', {
          url: '/posts',
          views: {
            'tab-posts': {
              templateUrl: 'templates/tab-posts.html',
              controller: 'PostsCtrl'
            }
          }
        })
        .state('tab.newpost', {
          url: '/newpost',
          views: {
            'tab-newpost':{
              templateUrl: 'templates/tab-newpost.html',
              controller: 'NewCtrl'
            }
          }
        });
        /* + other states .... */
$urlRouterProvider.otherwise('/auth/login');
});

根据代码使用的第一个方法如下

ng-click="create('tab/newpost')"

应该是

ng-click="create('tab.newpost')"

我认为你需要修改state的名称，这样你就可以在它们之间导航

var app = angular.module('MyApp', ['ionic','firebase']);
    app.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
        .state('tab', {
          url: '/tab',
          abstract: true,
          templateUrl: 'templates/tabs.html'
        })
        .state('tab.posts', {
          url: '/posts',
          views: {
            'tab-posts': {
              templateUrl: 'templates/tab-posts.html',
              controller: 'PostsCtrl'
            }
          }
        })
        .state('tab.newpost', {
          url: '/newpost',
          views: {
            'tab-posts':{            /* the same name of the above state */
              templateUrl: 'templates/tab-newpost.html',
              controller: 'NewCtrl'
            }
          }
        });
        /* + other states .... */
$urlRouterProvider.otherwise('/auth/login');
});