AngularJS ng-click转到另一个页面(使用Ionic框架)

Question

理想情况下,当我点击按钮(位于顶部的Ionic导航栏中)时,它应该将我带到另一页.然而它不起作用.点击后,导航栏按钮全部消失.

当我使用虚拟代码时,它有效; 警报出现.但是当我将它交换到实际代码时,它无法工作.

我对控制器代码以及如何引用URL或视图感到有些不适.但是使用href和ui-sref进行测试也无法产生任何结果.Google Devt Tools(JS控制台)和Batarang也没有显示任何内容.

有人能告诉我的方式吗？

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

Answer 1

基于评论,并且由于@Thinkerer (OP - 原始海报)为此案例创建了一个插件,我决定附加更多详细信息的答案.

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

第一个也是重要的变化:

// 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'
    }
  }
})

我们需要他们连接的网址'/tab'+ '/posts'.那是我们想要用作其他人的网址

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

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

因为.state('tab.newpost'将被替换的.state('tab.posts',我们必须把它放到同一个锚:

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

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

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

正如我在之前的回答和评论中已经说过的那样 ......这$state.go()是唯一正确的方法,如何使用ionic或ui-router

检查所有在这里 最后说明一点-我犯之间运行只是导航tab.posts... tab.newpost...其余的将是类似

Answer 2

<a>与href一起使用而不是<button>解决我的问题.

<ion-nav-buttons side="secondary">
  <a class="button icon-right ion-plus-round" href="#/app/gosomewhere"></a>
</ion-nav-buttons>

Answer 3

有人认为你应该改变的是电话$state.go().如下所述:

• $ state.go(to [,toParams] [,options])

传递的参数应该是州名

$scope.create = function() {
  // instead of this
  //$state.go("/tab/newpost"); 

  // we should use this
  $state.go("tab.newpost"); 
};

从一些引用文档(第一个参数来的[$state.go(to \[, toParams\] \[, options\]):

至

字符串绝对状态名称或相对状态路径

要转换到的状态的名称或相对状态路径.如果路径以^或开头.然后它是相对的,否则它是绝对的.

一些例子:

$state.go('contact.detail') will go to the 'contact.detail' state
$state.go('^') will go to a parent state.
$state.go('^.sibling') will go to a sibling state.
$state.go('.child.grandchild') will go to a grandchild state.