Javascript 如何有条件地向元素动态添加AngularJS指令？

所以我不能真正让它工作，我有以下代码

HTML:

安古拉斯普朗克
文件。填写（“”）；
{{vt.t}}
{{vt.f}}

{{vt.t}}
{{vt.f}}

JavaScript:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.vt = { t: true, f: false };
});

app.directive('myDirective', function($compile) {
  return {
    restrict: 'AC',
    template: '<div>Directive on</div>',
    replace: true
  };
});

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.vt={t:true，f:false}；
});
app.directive（'myDirective'，函数（$compile）{
返回{
限制：“AC”，
模板：'上的指令'，
替换：正确
};
});

普朗克：

---

如您所见，动态添加这些类时不会触发指令，但在我的上一个“静态”示例中效果良好。我还尝试将指令属性设置为true或false，但似乎没有帮助。

我认为您应该在指令中使用model变量。然后，您可以轻松访问所需的任何值

请参阅以下答案：

---

这是因为ng类在编译过程后设置了类，这里解释了一切：解决方法取决于指令的作用。如果或ng开关可能会使用

ng，或者可能需要根据使用情况在指令中添加更多逻辑
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.vt = { t: true, f: false };
});

app.directive('myDirective', function($compile) {
  return {
    restrict: 'AC',
    template: '<div>Directive on</div>',
    replace: true
  };
});