Angular JS and Bootstrap 3 I am trying to use ng-hide to prevent a back button from displaying on homepage

Question

I am trying to use ng-hide to not display a back button in the top navbar on the homepage of a website. Here is the html that is for the button:

<button type="button" class="navbar-back my-hidden-sm my-hidden-md my-hidden-lg" ng-   hide="false" ng-click="back()"><span class="glyphicon glyphicon-arrow-left"></span>
</button>

In the controller I have tried to define false as:

$scope.showBackButton = function() {
  if ($location.path() === '/') {
      return false;
  } else {
      return true;
  }
};

For some reason the back button is still displaying on the homepage and other pages. It also could be a conflicting style in Bootstrap 3 but just thought I would ask here to see if anyone had any ideas. I am very new to Angular JS and JS in general but had somebody helping me yesterday but we still could not get it to not show on the homepage which we have defined here:

$scope.homeLandingPage = '/';
if ($scope.buyer) {
  $scope.homeLandingPage = '/buyerhome';
} else if ($scope.seller) {
  $scope.homeLandingPage = '/sellerhome';
}

Thank you for any suggestions! I did run across something saying that if Bootstrap 3 had something styled to display:block that it could conflict with ng-hide but I could not find anything in the code that was doing that other than

div {
display: block;
} 

which is showing as a user agent stylesheet in the Chrome dev tools

Thank you,

Trevor

Answer 1

Have you tried this:

<button type="button" class="navbar-back my-hidden-sm my-hidden-md my-hidden-lg" ng-hide="showBackButton()" ng-click="back()"><span class="glyphicon glyphicon-arrow-left"></span>
</button>

Edit:

Add a console.log in your showBackButton function and verify that $location.path() is what you're expecting it to be ('/' in this case), as well as if the function is even being called in the first place.

$scope.showBackButton = function() {
  console.log($location.path());
  if ($location.path() === '/') {
      return false;
  } else {
      return true;
  }
};

Answer 2

You should use ng-hide="true" or ng-show="false" to hide your button. If you set ng-hide="false" button will be still visible because you have double negation.

You can use your function with ng-show="showBackButton()"