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    lt button class  button button-icon ion-compose  ng-click  create    gt  lt  button gt     dummy controller code in js file    scope create   function       alert  working          actual html code  I tried all 4 versions     lt button class  button button-icon ion-compose  ng-click  create  tab newpost    gt  lt  button gt   lt button class  button button-icon ion-compose  ui-sref  tab newpost  gt  lt  button gt   lt button class  button button-icon ion-compose  href   tab newpost  gt  lt  button gt   lt button class  button button-icon ion-compose  ng-click  location path   tab newpost    gt  lt  button gt     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

User · Answer

Use  lt a gt  with href instead of a  lt button gt  solves my problem     lt ion-nav-buttons side  secondary  gt     lt a class  button icon-right ion-plus-round  href    app gosomewhere  gt  lt  a gt   lt  ion-nav-buttons gt

User · Answer

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    lt a href     somepage html  class  button  gt Back to Listings lt  a gt    Hope this helps

User · Answer

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  quot  tab newpost quot           we should use this    state go  quot tab newpost quot         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

User · Answer

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   lt button class  button button-icon ion-compose  ng-click  createFixed    gt  lt  button gt   lt button class  button button-icon ion-compose  ng-click  createVariable   tab newpost    gt  lt  button gt

User · Answer

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    lt ion-nav-view name  tab-posts  gt  lt  ion-nav-view gt      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

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

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to ionic-framework