Navbar not working + how to have groupings?


#1

Hi all, I have 2 questions. Thanks!

  1. How to get the navbar working (buttons not working)

  2. Is it possible to have conditional appearance of buttons with class groupings with the navbar view?

Codes attached:


**Html for header **

<ion-header-bar class="bar-light" ng-controller="NavCtrl" ng-submit="submitPost()">

  <div class="buttons">
    <button class="button-clear" href="/posts"><b>MyApp</b></button>
  </div> 

  <div class="buttons" ng-show="signedIn()">
    <button class="button button-icon ion-compose" href="#/tab/newpost"></button>
  </div> 

  <div class="buttons" ng-show="signedIn()">
    <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-clear" href="#" ng-click="logout()">Logout</button>
  </div>

  <div class="buttons" ng-hide="signedIn()">
    <button class="button-clear" href="#/register">Register</button>
    <button class="button-clear" href="#/login">Login</button>
    <!--<button class="button-clear" ui-sref='login'>Login</button>-->
  </div>
</ion-header-bar>



The js file

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();
      };
});

#2

Can you put this into a codepen?


#3

codepen editor codes for the app here

This is how the code appear on my local server (I removed the list of posts as its working, except for the comments buttons).

Theres other js files which I excluded as Im new to programming and a step by step guide will be great. Thanks!

Note: theres 2 html files in the html.

  1. list of post page where you can create new post and/or comment on existing ones + authentication (register, login, logout)

  2. create post page (newpost.html) where one can submit or exit.

Problems:

  • navbar buttons not working (create icon is supposed to bring up a new page to write new things on) i tried href to newpost with UI-router in app.js but doesnt work as well.
  • comments href in the post lists not working
  • icons all biased to the left, how do i shift some to the right?

Google devt tool on F12 shows this error:
TypeError: Cannot call method ‘then’ of undefined
at multiple areas including at Scope.$scope.submitPost