AngularJS ng-click to go to another page (with Ionic framework)

Question

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

Are you trying to reload the **whole** page? Or just navigate to that tab? — manosim, Aug 23 '14 at 17:05
The app has a navbar at top and a bottom bar. The bottom bar is represented by the state "tab". On click, it should navigate to the new page while navbar and bottom bar stays. — Thinkerer, Aug 23 '14 at 17:08
If you can provide us with a [codepen](http://codepen.io/ionic/pen/AGnqc) link then it will be easier to help you. — manosim, Aug 23 '14 at 17:19
Just to be sure, have you check my answer? your issue comes from ui-router which is part of ionic framework. The $state.go must be called properly - with a state name, not with the url... hope this will help a bit ;) — Radim Köhler, Aug 23 '14 at 17:21
@RadimKöhler I tried the $state.go and $window method and both had a Cannot GET /tab/newpost error (when the html has a ng-click=create() rather than ng-click("tab.newpost") which I guess means its somewhat working. If using $state.go, I am not sure how else to make it work. Codepen works poorly here as I have various codes related to the database and other items where I cant insert. — Thinkerer, Aug 23 '14 at 17:27
OK, you can follow the window stuff.. Just for your infomration: that's not the ionic way, because it does use ui-router. and that mean no need to use $location but $state.go — Radim Köhler, Aug 23 '14 at 17:29
Sorry, I meant the $window method gives a "Cannot GET /tab/newpost" error while the $state.go gives the original error. I think what was wrong previously was I inserted the 'tab.newpost' in both the html create() and the controller file $scope.go("tab.newpost"). There is progress now! :) — Thinkerer, Aug 23 '14 at 17:34
@RadimKöhler using the $state.go....my navbar disappears on click. In addition, the contents in the html also did not change to the new page (for input):( — Thinkerer, Aug 24 '14 at 04:59
@Thinkerer suggestion: You should observe some answers about `ui-router` itself. Really. Because if you reveal how that amazing lib is working... you will know how.. Just a suggestion. Or create a plunker... and I will show you where is the issue. I promise that I will at least try ;) — Radim Köhler, Aug 24 '14 at 05:02
@RadimKöhler Sure Radim, appreciate your help and thank you. Let me try to get the Plunker up and running and Ill post it here. — Thinkerer, Aug 24 '14 at 05:46
Glad and ready to assist. Simply ui-router is so well designed, that it would be shame if we won't succeed to make your stuff running... let me know.. — Radim Köhler, Aug 24 '14 at 05:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/59876/discussion-between-thinkerer-and-radim-kohler). — Thinkerer, Aug 24 '14 at 10:06
@Thinkerer thanks for your plunker! great job. as promised, I went through and made very few adjustments. YOU WERE ALMOST THERE ;) see my other answer *(I decided to use another answer because its content is different)* — Radim Köhler, Aug 24 '14 at 14:34

Radim Köhler · Accepted Answer · 2014-08-24T14:58:55.773

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

Thanks a lot! In fact, to follow your changes and put both tab.posts and tab.newpost to have the same view and the whole thing works! Could you explain why? Also where shall I insert the changes? — Thinkerer, Aug 24 '14 at 15:04
This solution is one of many. We can do it like we did, if *new* should be **replacing** the *posts*. But we can also create two areas with different view-names/targets *(sibling views)*. Or we can move the *new* under the *posts*, and then let's say on top of the list could be area where we create new ... while being still on posts (`tabs.posts.new`)... and many others. I would strongly suggest go here: http://stackoverflow.com/a/20581135/1679310 and visit all the link I mentioned there mostly **state.js**. Please... that will help you a lot to see the real power of `ui-router`. Enjoy it ;) — Radim Köhler, Aug 24 '14 at 15:09
The transition works but a quick question. THe submit button I changed to ng-click="submitPost()". On clicking submit, it brings me to my login page but the new post entry was done. Any idea why? I think its the url router for otherwise. Any way I can say, if signed in, then on submit, go to posts page? — Thinkerer, Aug 24 '14 at 15:25
If you want after submit to go to the state tab.view, you have to call it like this `$state.go('tab.view', {postId: postId})`... that's it. But please, slow down. please, read my links.. that will help. and also this: http://stackoverflow.com/a/21097886/1679310 — Radim Köhler, Aug 24 '14 at 15:34

score 14 · Answer 2 · answered Jan 17 '15 at 04:15

14

Use <a> with href instead of a <button> solves my problem.

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

answered Jan 17 '15 at 04:15

Yang Zhang

4,540
4
37
34

1

Exactly what I was looking form, thanks. Also for anyone wondering ` – alexkb Jul 02 '15 at 05:08

score 8 · Answer 3 · edited Jun 20 '20 at 09:12

One think you should change is the call $state.go(). As described here:

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

The param passed should be the state name

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

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

Some cite from doc (the first parameter to of the [$state.go(to \[, toParams\] \[, options\]):

to

String Absolute State Name or Relative State Path

The name of the state that will be transitioned to or a relative state path. If the path starts with ^ or . then it is relative, otherwise it is absolute.

Some examples:

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

Giannis Paraskevopoulos · Answer 4 · 2014-08-23T17:16:42.793

3

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>

edited Aug 23 '14 at 17:16

answered Aug 23 '14 at 17:03

Giannis Paraskevopoulos

18,261
1
49
69

where and how do I insert the code? DO I have to inject dependencies as well for $window? – Thinkerer Aug 23 '14 at 17:05
how would the html be? should it still be ng-click="create('/tab/newpost')"? or a href? – Thinkerer Aug 23 '14 at 17:13
it depends on if you want it to be a variable or to be fixed. – Giannis Paraskevopoulos Aug 23 '14 at 17:14
Sorry Im quite new to this. Could you spare some time to show me the 2 different versions? No need for elaborate explanations, I can try to read and understand it first – Thinkerer Aug 23 '14 at 17:16
does that mean for the variable code for controller...for url i just type url or any other words? or does it mean the actual url I wish to navigate to? – Thinkerer Aug 23 '14 at 17:33
In the controller definition you just put url. This is the variable that holds what you pass when you actually call that function. In your ng-click you define the actual value of the url in the parenthesis. – Giannis Paraskevopoulos Aug 24 '14 at 06:25

score 3 · Answer 5 · answered Dec 07 '15 at 10:09

3

If you simply want to go to another page, then what you might need is a link that looks like a button with a href like so:

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

Hope this helps.

answered Dec 07 '15 at 10:09

Kingsley Ijomah

3,273
33
25

AngularJS ng-click to go to another page (with Ionic framework)

5 Answers5

to

Linked

Related