ng-class 不会触发自定义指令 [重复]答案

【问题标题】：ng-class does not trigger custom directive [duplicate]ng-class 不会触发自定义指令 [重复]
【发布时间】：2018-06-13 07:46:48
【问题描述】：

我创建了一个AngularJS 指令，该指令将在所有具有类名 .collapse 的元素上触发。

但是当我使用 Angular 的 ng-class 指令添加这个类时，不会触发自定义的 collapse 指令。

我的问题演示

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.welcome = "model";
    
    $scope.isTrue = function() {
      return true;
    }
});

app.directive("directive", function($compile) {
  return {
    restrict: 'C',
    scope: {
      model: '@'
    },
    link: function(scope, elem, attrs) {
      elem.css("background-color", "blue");
    }
  }
});

.directive {
  background-color: red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <p>Simple Angular app</p>
  <div class="directive">Make my background color blue using the directive</div>
  <div ng-class="isTrue() ? 'directive' : ''">Make my background color blue using the directive</div>
</div>

如何使directive 也触发使用ng-class 添加的类？

【问题讨论】：

标签： javascript angularjs angular-directive

【解决方案1】：

我相信这是answered already here。

基本上，ng-class 设置类太晚了 - 在 DOM 加载之后。可以在指令本身内对指令应用条件以避免此问题。该链接中有使用指令的属性而不是类的示例，然后在指令中进行检查。希望有帮助。下面是一个例子：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js" type="text/javascript"></script>

<script>
var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.welcome = "model";

        $scope.isTrue = function() {
          return true;
        }
    });

    app.directive("directive", function($compile) {
      return {
            restrict: 'A',
            scope: {
                'condition': '='
            },
            link: function (scope, elem, attrs) {
            scope.$watch('condition', function(condition){
                if(condition){
                    elem.css("background-color", "blue");
                }
            });
        }
      }
    });
</script>

<style>
.directive {
  background-color: red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}
</style>
</head>

<body>
<div ng-app="myApp" ng-controller="myCtrl">
  <p>Simple Angular app</p>
      <div class="directive" directive condition="true">Make my background color blue using the directive</div>
      <div class="directive" directive condition="false">DO NOT make the background blue because the condition is false</div>
      <div directive condition="isTrue();">Make my background color blue using a function for the the directive</div>
</div>
</body>

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
感谢您的输入 - 我添加了更多详细信息和工作代码示例以供参考。