如何评估 html 代码中的不同 angularjs 指令

Question

我希望这是一个简单的问题。我在 javascript 中有一组项目，我想根据它们携带的指令名称以不同方式显示。例如：

下面是 javascript 创建一个小型对象数组。

var stuff = [];
stuff[0] = {directive: 'plain-text', toDisplay: 'some text'};
stuff[1] = {directive: 'super-text', toDisplay: 'some other text'};

现在，我想让我的 html 循环遍历这些项目并使用给定的指令来显示它们。我尝试了几件事，但似乎没有任何效果。感谢您的帮助。

Answer 1

同意@Jakub Judas 的评论——您可以在指令中使用 $compile 来执行此操作。

在下面的示例中，我们reduce将数组转换为由新指令组成的字符串。然后我们使用 $compile 编译该字符串，最后使用 append 将编译后的 html 添加到 DOM:

var module = angular.module('myApp', [])
   .directive('myTest', function($compile) {
      return {
        restrict: 'E',
        template: '<div></div>',
        link: function($scope, $element, $attrs) {
       
        var stuff = [];
 stuff[0] = {directive: 'plain-text', toDisplay: 'some text'};
        stuff[1] = {directive: 'super-text', toDisplay: 'some other text'};
        
        var template = stuff.reduce(function(str, thing) {
          return str + "<" + thing.directive + ">" + thing.toDisplay + "</" + thing.directive + ">";
        }, '');
        
        var compiled = $compile(template)($scope);
        $element.append(compiled);
      }
    }
  })
  .directive('plainText', function() {
    return {
      restrict: 'E',
      template: '<div class="plain-text"><ng-transclude></ng-transclude></div>',
      transclude: true,
    }
  })
  .directive('superText', function() {
    return {
      restrict: 'E',
      template: '<div class="super-text"><ng-transclude></ng-transclude></div>',
      transclude: true,
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

<div ng-app="myApp">
  <my-test></my-test>
</div>

请注意，我使用 ng-transclude 来显示文本，但您可以轻松修改它以接受文本作为属性。

另请注意，如果指令名称或文本是由用户动态输入的，这是不安全的——在这种情况下，您需要确保适当地转义内容。

如何评估 html 代码中的不同 angularjs 指令

How to evaluate different angularjs directives in html code

html

angularjs-directive