ng-click toggle работает только при первом щелчке

Question

Я хочу переключить логическое событие щелчком, используя Angular. Это мой код

<div class="nav_mobile" ng-click="mobilestatus.navActive = (mobilestatus.navActive == false) ? true : false"> 
    <a href="" class="gradient-menu"></a> 
</div> 

<nav> 
    <ul class="nav_mobile_list" ng-class="{active: mobilestatus.navActive}"> 
     <li><a ui-sref="about" ng-click="mobilestatus.navActive = false">About</a></li> 
     <li><a ui-sref="contact" ng-click="mobilestatus.navActive = false">Contact</a></li> 
    </ul> 
</nav> 

Контроллер выглядит следующим образом

angular.module('app').controller('NavCtrl', function ($scope){ 
    $scope.mobilestatus = {navActive: false}; 
}); 

Я также попытался другие сокращенные обозначения. Исходное значение navActive неверно. ng-click на nav_mobile делает атрибут navActive истинным в первый раз, но при повторном нажатии он не возвращается к false. При нажатии на li элементы navActive вернутся к false. Любое предложение приветствуется.

Answer 1

Попробуйте это заявление

ng-click="mobilestatus.navActive = !mobilestatus.navActive" 

EDIT

Если вы не имеете ни малейшего представления о что происходит внутри вашего кода пытаются отладить его. Используйте вызов функции вместо выражения DOM угловой точки и выхода журнала в консоль. Также вы можете использовать контрольные точки.

HTML

ng-click="toggle()" 

Контроллер

$scope.toggle = function toggle() { 
    $scope.mobilestatus.navActive = !$scope.mobilestatus.navActive; 

    console.log('Status is ' + $scope.mobilestatus.navActive); 
}; 

Вы увидите, если этот код является исполняемым и $ scope.mobilestatus доступна для HTML части.

EDIT

Вот plunker

Answer 2

Проверить this решение:

<div class="nav_mobile" ng-click="mobilestatus.navActive = !mobilestatus.navActive"> 
    <a href="" class="gradient-menu">Test- {{mobilestatus.navActive}}</a> 
    </div> 

    <nav> 
    <ul ng-class="{'active': mobilestatus.navActive, 'inactive': mobilestatus.navActive}"> 
     <li><a ui-sref="about" ng-click="mobilestatus.navActive = !mobilestatus.navActive">About</a></li> 
     <li><a ui-sref="contact" ng-click="mobilestatus.navActive = !mobilestatus.navActive">Contact</a></li> 
    </ul> 
    </nav>