AngularJS ng-click转到另一个页面（使用Ionic框架）
理想情况下，当我点击button（在顶部的离子导航栏中），它应该把我带到另一个页面。 然而它不工作。 点击后，导航栏button全部消失。
当我使用虚拟代码，它的工作原理; 警报出现。 但是，当我将其交换到实际的代码，它无法正常工作。
我对控制器代码有一些错误的感觉，以及如何引用URL或视图。 但是使用href和ui-sref进行testing也不会产生任何结果。 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');
根据评论，由于@Thinkerer （OP的原创海报）为这个案件创造了一个蹲点，我决定附加更多细节的答案。
- 这里是由@Thinkerer创build的一个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' } } })
我们需要他们连接的URL '/tab' + '/posts' 。 这是我们想要使用的其他url
其余的应用程序非常接近我们需要的结果…
例如，我们必须将内容放置在相同的目标targetgood中，只是这些被改变了：
.state('tab.newpost', { url: '/newpost', views: { // 'tab-newpost': { 'tab-posts': { templateUrl: 'tab-newpost.html', controller: 'NavCtrl' } }
因为.state('tab.newpost'将replace .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 …其余的将是类似的
用<a>与href而不是<button>解决了我的问题。
<ion-nav-buttons side="secondary"> <a class="button icon-right ion-plus-round" href="#/app/gosomewhere"></a> </ion-nav-buttons>
一个认为你应该改变的是调用$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\] ）的第一个参数）引用：
至
string绝对状态名称或相对状态path
将被转换到的状态的名称或相对状态path。 如果path以^或开始。 那么它是相对的，否则就是绝对的。
一些例子：
$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.
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>
如果你只是想去另一个页面，那么你可能需要的是一个链接，看起来像一个像这样的HREF的button：
<a href="/#/somepage.html" class="button">Back to Listings</a>
希望这可以帮助。
