Ionic nav/header bar buttons not working!

ionic-v1
1

My buttons in the nav bar are not working. This includes:

  1. create item (top left corner) should lead to new inputs page
  2. clicking on app name should lead to main page
  3. clicking on user name should go to another page

I tried shifting the ions-nav-bar, ion-nav-view or ion-views around to changing states from href to ui-sref and nothing works. I think i need a new controller for a new post?

The examples on the website are also very very brief. Please kindly help?

Thanks!

The end header now looks like this.

This is the navbar html

<ion-nav-view>
  <ion-view ng-controller="NavCtrl">
    <ion-nav-bar></ion-nav-bar>
    <ion-nav-buttons side="left" ng-submit="submitPost()">
       <button class="button button-icon ion-compose" href='/tab/newpost'></button> 
    *<!-- the furthest I got was to shift down submitPost() as ng-click="submitPost() to the ion-nav-button but it does not go to the new page -->* 
       <button class="button-clear" href='#/tab/posts'><b>MyApp</b></button>
          </ion-nav-buttons>
    
          <ion-nav-buttons side="right">
            <button class="button-clear" href="#/users/{{ currentUser.username }}">
              <img ng-src="http://www.gravatar.com/avatar/{{ currentUser.md5_hash }}" class="nav-pic"/>{{ currentUser.username }}
 </button>
    
            <button class="button button-icon ion-log-out" ng-click="logout()"></button>
          </ion-nav-buttons>

This is the stateProvider

.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: 'NavCtrl'
        }
      }
    })

This is the controller

app.controller('NavCtrl', function ($scope, $location, Post, Auth) {
    $scope.post = {url: 'http://', title: ''};
    
    $scope.submitPost = function () {
      Post.create($scope.post).then(function (postId) {  
        $scope.post = {url: 'http://', title: ''};
        $location.path('/posts/' + postId);            
      });
    };

    $scope.logout = function () {
      Auth.logout();
      $location.path('/auth/login');   <!-- have to click twice to logout -->
    };
  });

This is the index.html file

  <body animation="slide-left-right-ios7">
        <div ui-view>
          <ion-nav-bar class="bar-stable nav-title-slide-ios7"></ion-nav-bar>
          <ion-nav-view></ion-nav-view>
       </div>
2

Hmm this maybe come from the docs not being clear.

So you don’t need to put an ion-nav-bar in your ion-view if you already have one in your index.html.

Take a look at this codepen

Also, remove the div with the ui-view, it will mess your project up.

3

Thanks Mike for the reply.

The formatting cleared a fair bit but buttons are still not working.

I noticed because I was missing a controller to bring me to another page on a click of a button. I searched around but nothing mentioned on how to combine ui-router and ng-click (or other methods i should use).

I understand some stuff may be outside of Ionic but if u do have a suggestion/s, Ill be happy to hear :slight_smile: esp on the controller codes.

post.html

 <ion-nav-buttons side="left">
        <button class="button button-icon ion-compose" ng-click="go('/tab/newpost')"></button>
        <button class="button-clear" ui-sref='tab.posts'><b>MyApp</b></button>
      </ion-nav-buttons>

This is the controller

app.controller('NewCtrl', function($scope, $state, $location, $ionicPopup, $timeout) {
	$scope.go = function() {
		$state.go('tab.newpost')
	};

Some how Im on ui-router but none of the ui-sref are working…its very odd.

4

If you need to use ng-click with ui-router, you should able to do this

$scope.nav = function() {
  $state.go('tab.newpost')
};```

Can you put together an example codepen?
5

Ok here you go, Im not too sure how the pen works so perhaps you could give some pointers. When i click on the button, the posts page navbar dissappears but is not replaced by anything while the body has no changes.

http://codepen.io/mthh/pen/JAeLm

Are there any better ways of doing this? I tried [a href bla] but it isnt working

Just as a reference and contrast, this guys shows that using all 3 ways, the link can be done so Im not sure whats missing in mine?
3 examples for routing on Codepen

6

Maybe the issue is with your Post and Auth. After removing them and your code and just testing with a simple alert, things worked fine.

7

Hi Mike,
by removing Post and Auth, do you mean entirely removing them from the controller? or just the dependencies?

Post is defined in a js file for posting a new item while Auth is defined in yet another js file for authentication purposes.

8

The dependencies themselves. If there’s an issue in one of them, it can throw the whole project off.

9

Its really odd, it still doesnt work even after tweaking the dependencies as you mentioned. Any other ways I can do further testing?

10

Open up the javascript console and see what errors are coming in

11

ctrl shift J doesnt show any errors in the console tab, neither does Batarang.

Not removing Auth and Post, the test message that you devised pops up on my local version which meant it worked!. So possibly it might be the $scope.create portion to replace the alert that might be wrong?

$scope.create = function() {
  alert("working");
};

while the button is

<button class="button button-icon ion-compose" ng-click="create()"></button>
12

To help visualize better.

This is the pic for before and after the button click.

  • buttons went missing
  • url did change
  • the post list remains unchanged but its supposed to transit to a new html page