javascript - 在 View 更改时重新计算 Angular 指令？

Question

我有一个 div，其元素依赖于 ng-class 来设置一些样式属性(它调用一个返回类字符串的函数)。通常当 div 中的某些内容被修改时，Angular 会为我重新计算所有 ng-class 变量。但是，我在这个 div 之外有一个按钮，它只是向它添加一个类来改变它的宽度；发生这种情况时，Angular 不会重新计算 ng-class 函数。只有在我在该 div 中执行一些操作后，它才会为我计算所有内容。有什么办法可以在按下这个外部按钮后强制 Angular 重新计算吗？

Answer 1

如果您将数据传递给指令，可能会起作用

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    
  
  
})
.directive('testDirective', function() {
  return {
    restrict: 'E',
    scope: {
      classData: '='
    },
    template: '<div ng-class="classData"> My directive </div>'
  };
});

.blue {
background: blue;
}
.green {
background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <test-directive class-data="myClass"></test-directive>
  
  <input type="text" ng-model="myClass" />(green or blue)

</div>