AngularJS ng-click 转到另一个页面(使用 Ionic 框架) [英] AngularJS ng-click to go to another page (with Ionic framework)

问题描述

理想情况下，当我单击按钮(位于顶部的 Ionic 导航栏中)时，它应该会将我带到另一个页面.但是它不起作用.单击后，导航栏按钮全部消失.

Ideally, when I click on the button (which is in the Ionic navbar at the top), it should bring me to another page. However its not working. Upon click, the nav bar buttons all disappears.

当我使用虚拟代码时，它可以工作；出现警报.但是当我将它交换到实际代码时，它无法工作.

When I used dummy codes, it works; the alert appears. But when I swap it to the actual code, it fails to work.

我感觉控制器代码和 URL 或视图的引用方式有问题.但是使用 href 和 ui-sref 进行测试也无法产生任何结果.Google Devt Tools(JS 控制台)和 Batarang 也没有显示任何内容.

I've got a feeling somethings wrong with the controller codes and how the URL or view is referred to. But testing with href and ui-sref also fails to yield anything. Google Devt Tools (JS console) and Batarang also shows nothing.

有人可以给我指路吗?

虚拟 html 代码

<button class="button button-icon ion-compose" ng-click="create()"></button>

js 文件中的虚拟控制器代码

$scope.create = function() {
  alert("working");
};

实际的 html 代码(我尝试了所有 4 个版本)

<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>
<button class="button button-icon ion-compose" ng-click="location.path('/tab/newpost')"></button>

控制器文件(Post 和 Auth 依赖项工作正常).当我尝试将 URL 放在 .go() 和 function() 中时，应用程序失败.

app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};

    $scope.create = function() {
      /* $location.path('/tab/newpost'); */   /* this variant doesnt work */
      $state.go("/tab/newpost"); 
    };
  });

状态 js 文件的摘录

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

$urlRouterProvider.otherwise('/auth/login');

推荐答案

基于评论，并且由于@Thinkerer (OP - 原始海报) 为此案例创建了一个 plunker，我决定附上另一个更详细的答案.

Based on comments, and due to the fact that @Thinkerer (the OP - original poster) created a plunker for this case, I decided to append another answer with more details.

• 这是一个由 @Thinkerer
创建的 plunker
• 这是它的更新和工作版本

第一个也是重要的变化:

The first and important change:

// instead of this
$urlRouterProvider.otherwise('/tab/post');

// we have to use this
$urlRouterProvider.otherwise('/tab/posts');

因为状态定义是:

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

.state('tab.posts', {
  url: '/posts',
  views: {
    'tab-posts': {
      templateUrl: 'tab-posts.html',
      controller: 'PostsCtrl'
    }
  }
})

并且我们需要它们的连接 url '/tab' + '/posts'.这就是我们想要用作 otherwise

and we need their concatenated url '/tab' + '/posts'. That's the url we want to use as a otherwise

应用程序的其余部分非常接近我们需要的结果...
例如.我们仍然必须将内容放入同一个视图 targetgood，只是这些被更改了:

The rest of the application is really close to the result we need...
E.g. we stil have to place the content into same view targetgood, just these were changed:

.state('tab.newpost', {
  url: '/newpost',
  views: {
    // 'tab-newpost': {
    'tab-posts': {
      templateUrl: 'tab-newpost.html',
      controller: 'NavCtrl'
    }
  }

因为 .state('tab.newpost' 将 替换 .state('tab.posts' 我们必须放置它进入同一个锚点:

because .state('tab.newpost' would be replacing the .state('tab.posts' we have to place it into the same anchor:

<ion-nav-view name="tab-posts"></ion-nav-view>  

最后对控制器进行一些调整:

Finally some adjustments in controllers:

$scope.create = function() {
    $state.go('tab.newpost');
};
$scope.close = function() { 
     $state.go('tab.posts'); 
};

正如我在之前的回答和评论中所说的 ... $state.go() 是唯一正确的方法使用 ionic 或 ui-router

检查所有此处最后一点 - 我只在 tab.posts 之间运行导航... tab.newpost... 其余部分类似

Check that all here Final note - I made running just navigation between tab.posts... tab.newpost... the rest would be similar

这篇关于AngularJS ng-click 转到另一个页面(使用 Ionic 框架)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！