It would be ideal if all 3 methods could work seamlessly. The CodePen example below effectively demonstrates these 3 methods.
Check out the correct and functional CodePen Demo app
Unfortunately, at present, none of the 3 methods seem to be working correctly; upon clicking the button, the navbar disappears (showing an empty navbar) while the main page remains unaffected.
I'm uncertain whether this issue stems from a coding problem, an Ionic framework glitch, or simply due to the fact that transitioning to a new page from a navbar is not intended. The latter seems too illogical to accept, however.
If there are any helpful individuals who can pinpoint where the problem lies and assist me in resolving it, I would greatly appreciate your help.
This is 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 HTML for the button I am using (Note that each of the 3 versions were tested separately)
<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>
<!-- Remaining content body here-->
</ion-content>
</ion-view>
The code in nav.js primarily related to 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() */
};
});
The code snippet from 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');
});