javascript - 单击 ionic 导航栏中的按钮移动到新页面的所有 3 种方法都不起作用

标签 javascript angularjs ionic-framework

理想情况下,所有 3 种方法都应该有效。 下面的代码笔很好地展示了所有 3 种方法。

<强> Correct and working CodePen Demo app

目前这3种方法都不起作用;单击按钮后导航栏就会消失(显示空导航栏),而核心页面仍然是相同的主页。

我不确定这是代码问题、 ionic 问题还是只是我不应该从导航栏转换到新页面。最后一个太不合逻辑了,无法接受。

有哪位好心人知道问题所在并帮助我吗?

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中的代码主要用于state.create方法

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

关于javascript - 单击 ionic 导航栏中的按钮移动到新页面的所有 3 种方法都不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25350456/

相关文章:

javascript - JSON 中的重复键

javascript - 将工具提示的值发送到 javascript 函数

javascript - 验证单选按钮 AngularJS

javascript - 重复和插入指令

javascript - Angular mongodb数组格式写错了

android - Ionic 5 Phonegap-NFC 插件安装时未安装错误

javascript - 单击灯箱中的按钮重定向到不同页面

javascript - 调整容器大小时,Cytoscape.js 指令不会使尺寸无效

javascript - 如何在生产模式下构建 Ionic 应用程序,Ionic 构建的行为有所不同

android - 在 ionic 中构建 android 应用程序时如何解决问题?