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

47
votes

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');
5
javascripthtmlangularjsionic-framework
Are you trying to reload the whole page? Or just navigate to that tab? – manosim
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
If you can provide us with a codepen link then it will be easier to help you. – manosim
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
@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

5 Answers

36
votes

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.

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

14
votes

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

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

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.
3
votes
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>
3
votes

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.