AngularJS ng-click не работает с переменной $ scope

Question

Невозможно отобразить мой нижний div.

пробовал все предложения в этом году с этого года. Добавлена ​​переменная в область $ scope, попробовал $ scope.apply(); И т.д.

<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> 

В моей 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 
}; 

Я знаю, что контроллер загружается, так как журнал консоль показывает вверх.

Answer 1

Вы, кажется, вне зоны контроля. попробуйте упаковка все это в другом DIV, как это:

<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, иногда помещая навигационное меню и компоненты, которые управляются с помощью меню в одной обертке не вариант. В этом случае вы можете использовать службы и $ broadcast/$ emit, чтобы сообщить об изменениях.

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