AngularJS ng-click is not working with $scope variable

Question

Can't get my bottom div to show.

tried all the suggestions in SO from this year. Added a variable to $scope, tried $scope.apply(); , etc.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="navController">
    <div class="navbar-header" >
      <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/#!/">Exampe</a>
    </div>
    <div class="cart-summary">
        <a href="/#!/cart">
          <image src="/example/source" />
            <div class="cart-info">
              <div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
              <div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
            </div>
          </a>
    </div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
  <ul>
      <li><button><a href="/#!/cart">Cart</a></button></li>
  </ul>
</div>

In my navController:

console.log('navController up!');
$scope.vm = { open: false};
$scope.navCollapse = function(){
  console.log('before click', $scope.vm.open);
  $scope.vm.open = !$scope.vm.open;
//  $scope.vm.open = ($scope.vm.open == false) ? true : false;
  console.log('after click', $scope.vm.open);
  //open up menu
};

I know the controller is loaded because the console log shows up.

I was looking and that and thinking the same thing! I'm going to try your suggestion and let you know thank you :) — Kyle Calica-St
– Kyle Calica-St, Commented Dec 10, 2016 at 8:58

Vladimir M · Accepted Answer · 2016-12-10 09:29:49Z

0

You div seems to be outside of controller's scope. try wrapping whole thing in another div like this:

    <div ng-controller="navController">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
    <div class="navbar-header" >
      <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/#!/">Exampe</a>
    </div>
    <div class="cart-summary">
        <a href="/#!/cart">
          <image src="/example/source" />
            <div class="cart-info">
              <div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
              <div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
            </div>
          </a>
    </div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
  <ul>
      <li><button><a href="/#!/cart">Cart</a></button></li>
  </ul>
</div>
</div>

Ofc, sometimes placing navigation menu and components, that are controlled by the menu into a single wrapper is not an option. In this case you may use services and $broadcast/$emit to communicate the changes.

https://plnkr.co/edit/xwQkUYrDu9WL9dC46MOY?p=preview

edited Dec 10, 2016 at 9:29

answered Dec 10, 2016 at 8:58

Vladimir M

4,4891 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kyle Calica-St Over a year ago

it didn't work 0.o that's strange I thought for sure that it would.

Vladimir M Over a year ago

Idk. seems to be working in plunker: plnkr.co/edit/xwQkUYrDu9WL9dC46MOY?p=preview

Collectives™ on Stack Overflow

AngularJS ng-click is not working with $scope variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related