AngularJS ng单击以转到另一页面（使用Ionic框架）

Question

理想情况下，当我单击按钮（位于顶部离子导航栏上）时，它应该将我带到另一页。但是它不起作用。单击后，导航栏按钮全部消失。

当我使用伪代码时，它可以工作；警报出现。但是，当我将其交换为实际代码时，它将无法正常工作。

我感觉控制器代码以及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>

控制器文件（“发布”和“验证”依赖项正常工作）。 当我尝试将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创建的一个矮人
• 这是其更新的工作版本

第一个重要变化：

// 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'。这就是我们要用作 其他 网址的网址 __

该应用程序的其余部分确实接近我们需要的结果…
例如，我们仍然不得不将内容放入相同的视图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，其余部分类似