即使切换变量，ng-class也不起作用

Question

所以我有这个广播接收器，当data = false时接收信息，如果要切换一个类：

$rootScope.$on('toggleRangeMode:broadcast', function (event, data) {
    $scope.isRangeMode = data;
    console.log("$scope.isRangeMode", $scope.isRangeMode) // I have this console log and even when the variable is FALSE it does not work   
});

这就是我的html外观：

 <a class="btn" ng-class="{'btn-warning': isRangeMode, 'btn-white': !isRangeMode}"></a>

Answer 1

您的代码运行正常。

我猜您无法观察到样式的变化，因为您的超链接不包含任何文字

只要isRangeMode值发生变化，超链接类就会发生变化。

我已将$ timeout用于演示目的。

演示

＆＃13;

＆＃13;

angular.module('myApp', []);

angular
  .module('myApp')
  .controller('MyController', MyController);

MyController.$inject = ['$scope', '$rootScope', '$timeout'];

function MyController($scope, $rootScope, $timeout) {
  $rootScope.$on('toggleRangeMode:broadcast', function(event, data) {
    $scope.isRangeMode = data;
    console.log("$scope.isRangeMode", $scope.isRangeMode);
    // I have this console log and even when the variable is FALSE it does not work   
  });

  $rootScope.$emit('toggleRangeMode:broadcast', true);
  $timeout(function() {
    $rootScope.$emit('toggleRangeMode:broadcast', false);
  }, 2000);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
  <a class="btn" ng-class="{'btn-warning': isRangeMode, 'btn-white': !isRangeMode}">link</a> {{isRangeMode}} {{ isRangeMode?'btn-warning':'btn-white'}}
</div>

＆＃13;

＆＃13;

＆＃13;