Button that links to another view?

ionic-v1
1

I am surprised that there’s not an easy to find example of linking to another view (page) using a button (not an anchor). I have been searching around for awhile, but nothing seems to work for me. I’m new to Angular and Ionic, but have read through the Ionic docs.

To simplify things, I am not posting the large amount of code that I am actually working on. Instead, here’s a pen that I am using to try to get ng-click to link to another view or at least open up an alert. I must be missing something simple here.

Thanks in advance,

  • Cory

My simplified code: http://codepen.io/cwoolf/pen/dIuwa

Was trying to use this solution:

1 Like
2

I saw your example and a do it, take a look:

Link to page with button? 
<!-- Sets initial viewport load and disables zooming  -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js">
</script>

  <body class="padding" ng-controller="PopupCtrl">
    <button ng-click="go('/settings')">
      settings
    </button>
    <br />
    <br />
     <button ng-click="opa_brasil_worldcup('Brazillll')">
      alert test
    </button>
    <script id="settings.html" type="text/ng-template">
      <div>settings page</div>
    </script>
  </body>
</html>

angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {

  $scope.go = function ( path ) {
    $location.path( path );
  };
  
  $scope.opa_brasil_worldcup = function (msg) {
    alert(msg);
  }
  
 
});

To change the page with ng-click you have to create a function on the controller and call following method: $location.path("/def/userManagement") and refering the ‘path’ with your routing defined in the app.js !!

I hope help !!

1 Like
3

I know at least 3 ways:

  • ui-sref="<the state, for example sidemenu.groups>"
  • $state.go('<the state, for example sidemenu.groups>');
  • $location.path( '<the state, for example sidemenu.groups>' + $stateParams.groupId + '/IDLE');

Grabbed some DEMO that might help

2 Likes
4

Excellent, thanks for the quick solution! Hope this helps others out in the future that struggled with getting button links to work like it did myself.

5

Thanks for the straightforward solution, the demo was helpful too! Cheers