AngularJS ng-clickが$ scope変数で動作しない

Question

下のdivを表示できません。

今年からSOのすべての提案を試しました。 $ scope.apply（）;を試した$ scopeに変数を追加しました。など私からNavControllerで

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

：

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で全体を包む試してください。

<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