如何有条件地动态添加AngularJS指令到元素中?

How do I dynamically add an AngularJS directive to an element conditionally?

本文关键字：指令 元素 AngularJS 添加 有条件 动态      更新时间：2023-09-26

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

HTML: 

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href='"" + document.location + "'" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  {{vt.t}} 
  <div my-directive="{{vt.t}}"></div>
  {{vt.f}}
  <div my-directive="{{vt.f}}"></div>
  <hr />
  {{vt.t}} 
  <div ng-class="{'my-directive': vt.t}"></div>
  {{vt.f}}
  <div ng-class="{'my-directive': vt.f}"></div>
  <hr />
  <div class="my-directive"></div>
  <div class="nodirectiveclass"></div>
</body>
</html>
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
  };
});

砰砰作响:http://plnkr.co/edit/7cJKhIuNqnsk1CkczjoE?p=preview

正如你所看到的，类在动态添加时不会触发指令，但在我最后一个"静态"示例中工作得很好。我还尝试将指令属性设置为true或false，但这似乎没有帮助。

我认为你应该在指令中使用模型变量。然后你可以很容易地访问任何你想要的值。

参考答案:AngularJS -创建一个使用ng-model

的指令
相关文章：