angularjs - How to update angular ng-class when a variable changes? -
i want ng-class update when variable in controller changes. reason, triggered on page load , whilst variable change, ng-class not update reflect this.
here code triggers variable change:
<a class="cs-mobile-menu__close-icon" ng-click="switchmobilemenu('right')"> </a>
here code want change depending on variable:
<div class="right-menu__user" ng-class="{ 'animate': true, 'animate--leave': !isrightmenuopen}"> {{user.firstname}} {{user.lastname}} </div>
here corresponding code controller:
$rootscope.isleftmenuopen = false; $rootscope.isrightmenuopen = false; $scope.switchmobilemenu = function(direction) { if (direction === 'left') { $scope.isleftmenuopen = !($scope.isleftmenuopen); } else { $scope.isrightmenuopen = !($scope.isrightmenuopen); } };
it seems ng-class set on initial ng-click
. believe need wrap above function in $scope.apply()
function ng-class
watches changes , applies them ng-click
toggles variable. on right track? if so, how this?
you don't need $scope.$apply. working example: https://jsbin.com/fogasiniku/edit?html,js,output
do have double dashes in css class name?
Comments
Post a Comment