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

问题描述

理想情况下，当我点击按钮（位于顶部的Ionic导航栏中）时，它会将我带到另一个页面。然而它不工作。点击后，导航栏按钮全部消失。

当我使用虚拟代码时，它可以工作;出现警报。
但是当我将它换成实际的代码时，它无法工作。

我感觉控制器代码有错误，以及如何引用URL或视图。但使用href和ui-sref进行测试也无法产生任何结果。 Google Devt Tools（JS控制台）和Batarang也没有显示任何内容。

请问有人给我看的方式吗？



代码

 < button class =button button-icon ion-composeng-click =create ）>< /按钮> 
  

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

  $ scope.create = function（）{
 alert（working）; 
}; 
  

实际的html代码（我试过所有4个版本）

 < button class =button button-icon ion-composeng-click =create（'tab .newpost'）>< /按钮> 
< button class =button button-icon ion-composeui-sref =tab.newpost>< / button> 
< button class =button button-icon ion-composehref =/ tab / newpost>< / button> 
< button class =button button-icon ion-composeng-click =location.path（'/ tab / newpost'）>< / button> 
  

控制器文件（Post和Auth依赖项可以正常工作）。当我尝试在.go（）和function（）中都放置该URL时，应用程序将失败。

  app.controller（'NavCtrl'，function（$ scope，$ location，$ state，Post，Auth）{
 $ scope.post = {url：'http：//'，title：''}; 
 
 $ scope.create = function（）{
 / * $ location.path（'/ tab / newpost'）; * / / *这个变体不起作用* / 
 $ 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


• 创建的一名运动员是它的更新版和工作版

第一个重要的变化：

  //而不是这个
 $ urlRouterProvider.otherwise（' /标签/后'）; 
 
 //我们必须使用这个
 $ urlRouterProvider.otherwise（'/ tab / posts'）; 
  

因为州的定义是：

 .state（'tab'，{
 url：/ tab，
 abstract：true，
 templateUrl：'tabs.html'$ b $ （
 
 
 $ tab $ post $ {$ b $'b'：'/ posts'，
 views：{$ b $'tab-posts'：{ 
 templateUrl：'tab-posts.html'，
 controller：'PostsCtrl'
} 
} 
}）
  

，我们需要它们的连接网址'/ tab' + '/帖子。这就是我们希望用作的网址

其他应用程序非常接近我们需要的结果... >
例如我们必须将内容放入相同的视图targetgood中，只是这些被更改：

  .state（'tab.newpost'， {
 url：'/ newpost'，
 views：{
 //'tab-newpost'：{
'tab-posts'：{
 templateUrl：' tab-newpost.html'，
 controller：'NavCtrl'
} 
} 
  

是因为 .state（'tab.newpost'将替换 <.c $ c> .state（'选项卡。帖子'我们必须将它放到同一个锚点中：

 < 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

检查所有 here
最后一点 - 我在 tab.posts ... tab.newpost ...其余部分会相似

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.

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.

Could someone show me the way please?

dummy html code

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

dummy controller code in js file

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

actual html code (I tried all 4 versions)

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

The controller file (the Post and Auth dependencies work ok). When I try to put the URL in both the .go() and function(), the app fails.

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"); 
    };
  });

Extracts of the state js file

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

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

解决方案

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.

• Here is a plunker created by @Thinkerer
• here is its updated and working version

The first and important change:

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

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

because the states definition is:

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

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

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

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

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

As I already said in my previous answer and comments ... the $state.go() is the only right way how to use ionic or ui-router

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屋！