调整窗口大小时，值不应用于Ng类

Question

我有以下控制器：

function PlansController($scope) {
  var vm = this;
  vm.plan = null;  
  vm.show = function (plan) {
    vm.plan = plan;
  }
  $scope.$on("match", function (event, mq) {                 
    if (mq === "mobile") {
      vm.plan = "free";
      console.log(vm.plan);
    }          
  });
})();

$范围$当媒体查询"屏幕和（最大宽度：31.9375em）"匹配时，在匹配时激发。然后我有以下内容：

<table class="plans" data-ng-class="vm.plan">

当我加载宽度与媒体查询匹配的页面时，我可以看到vm.plan类被应用于表。。。

问题是当打开大宽度的页面时。当我将其调整为mobil时，我在控制台中看到vm.plan变为"空闲"，因此Match条件被触发，vm.plan被定义，但CSS类没有应用于该表。

更新

我刚刚在中添加了一个示例https://jsfiddle.net/g3wzayp3/11/

只需增加HTML预览窗格，当宽度与媒体查询匹配时，您就会在控制台上看到值"true"。。。但该类不适用于文本。。。

知道为什么吗？

Answer 1

您是否试图在调整大小时应用名为"free"的类？如果是，则不是这样做的。ng类的使用方式类似于{free:vm.plan}，其中vm.plan变为true或false

示例：

<div ng-class="{free: should_apply}">Hello</div>

其中free是要应用的类，should_apply是一个评估为true或false 的变量

下面是一个小提琴的例子：https://jsfiddle.net/a7u1m3n6/

更新：

您需要在$on方法中调用$scope.$apply();。小提琴在这儿https://jsfiddle.net/g3wzayp3/12/