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

基于 cmets，并且由于 @Thinkerer （OP - 原始海报）为此案例创建了一个 plunker，我决定附加另一个包含更多详细信息的答案。

• 这是由@Thinkerer创建的plunker
• 这是它的updated and working version

第一个也是重要的变化：

// 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'。这就是我们想要用作 otherwise

的 url

应用程序的其余部分确实接近我们需要的结果...
例如。我们仍然必须将内容放到同一个视图 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'); 
};

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

检查所有here 最后一点 - 我只在 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"); 
};

一些引用自doc（[$state.go(to \[, toParams\] \[, options\]的第一个参数to）：

到

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

将转换到的状态的名称或相对状态路径。如果路径以 ^ 或 .那么它是相对的，否则它是绝对的。

一些例子：

$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.

Answer 4

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

    $scope.createVariable = function(url) {
      $window.location.href = url;
    };
    $scope.createFixed = function() {
      $window.location.href = '/tab/newpost';
    };
});

HTML

<button class="button button-icon ion-compose" ng-click="createFixed()"></button>
<button class="button button-icon ion-compose" ng-click="createVariable('/tab/newpost')"></button>

Answer 5

如果您只是想转到另一个页面，那么您可能需要一个看起来像带有 href 的按钮的链接：

<a href="/#/somepage.html" class="button">Back to Listings</a>

希望这会有所帮助。