'All 3 ways of moving to new page on click of button in the ionic navbar dont work

Ideally, all 3 methods ought to work. This codepen below shows all 3 methods well.

Correct and working CodePen Demo app

Currently, neither of the 3 methods work; the navbar just dissappears upon clicking the button (shows empty nav bar) while the core page remains the same main page.

Im not sure if its an code problem, ionic issue or just simply I should not transit to a new page from a navbar. The last one is too illogical to accept though.

Would any kind souls know where the issue lie and help me please?

My core content code in index.html

<body animation="slide-left-right-ios7">

        <ion-nav-bar class="bar-light nav-title-slide-ios7"></ion-nav-bar>

        <ion-nav-view></ion-nav-view>

The button html I have (Note all 3 versions were tested seperately)

    <ion-view ng-controller="NavCtrl"> 

     <ion-nav-buttons side="left">
      <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>
     </ion-nav-buttons>

     <ion-content class>
        <!-- Rest of the content body here --> 
     </ion-content> 
    </ion-view>

Code in nav.js mainly for the state.create method

app.controller('NavCtrl', function ($scope, $location, $state, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};

    $scope.create = function(stateName) {
      /* $location.path('/tab/newpost'); */ 
      $state.go(stateName);  /* tried swapping stateName with 'tab.newpost' and func() */
    };
  });

Code for app.js (Route file)

    var app = angular.module('MyApp', ['ionic','firebase']);

    app.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

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

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

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

        /* + other states .... */

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

Solution 1:^[1]

First method you used according to the your code look like this

ng-click="create('tab/newpost')"

It should be

ng-click="create('tab.newpost')"

Solution 2:^[2]

i think you need to modify states name so you can navigate between them

var app = angular.module('MyApp', ['ionic','firebase']);

    app.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider

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

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

        .state('tab.newpost', {
          url: '/newpost',
          views: {
            'tab-posts':{            /* the same name of the above state */
              templateUrl: 'templates/tab-newpost.html',
              controller: 'NewCtrl'
            }
          }
        });

        /* + other states .... */

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Seminda
Solution 2	Ahmed Wahba

'All 3 ways of moving to new page on click of button in the ionic navbar dont work

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]