javascript - 动态注入(inject)指令

Question

我需要 22 种不同类型的方式来展示某种类型的模型。我不想让我的 html 包含大量 if 语句和我的范围，而是想为每种类型创建一个指令。我根据 map 的类型从 map 中获取指令。功能如下。

$scope.getDirective = function (item) {
    var templateDirective = getDirective(item.type);
    var dir = '<' +  templateDirective + ' listId="' + $stateParams.listId + ' item="item">'
    return dir
  }

getDirective 是我正在使用的 map 。它工作得很好。

模板如下所示:

<div ng-repeat="item in templates | orderBy: sortOrder">
  <div ng-bind-html="getDirective(item)"></div>      
</div>

我遇到的第一个问题是，当将字符串放在一起时，字符串看起来像这样

"<temp-ratings listId="1" item="item">"

我正在使用的 map 工厂。

.factory('getDirective', [function () {
    var templates = {
      0: "temp-check",
      1: "temp-title",
      2: "temp-ratings",
      3: "temp-ratings1_10",
      4: "temp-short",
      5: "temp-long",
      6: "temp-log",
      8: "temp-yes-no",
      9: "temp-signature",
      10: "temp-text",
      11: "temp-multiple",
      12: "temp-employee",
      13: "temp-form",
      14: "temp-calculated",
      15: "temp-date",
      16: "temp-time",
      17: "temp-date_time",
      20: "temp-qr",
      21: "temp-barcode",
      22: "temp-photo",
      23: "temp-video"
    }

    return function (tempType) {
      return templates[tempType]
    }
  }])

另一个问题是当我检查元素时。它甚至没有尝试将其注入(inject)到 html 中。有人看到我做错了什么吗？

Answer 1

您可以编写自定义指令来动态编译其他指令，如下所示:

.directive('tempDynamic', function ($compile, getDirective) {
  return {
    scope: {
      item: '=tempDynamic'
    },
    link: function (scope, element, attrs) {
      var templateDirective = getDirective(scope.item.type);
      var html = '<' +  templateDirective + ' item="item">';
      var childElement = $compile(html)(scope);
      element.append(childElement);
    }
  }
});

并像这样使用它:

<div ng-repeat="item in templates" temp-dynamic="item"></div>

Plunker 示例: http://plnkr.co/edit/r5GNjklVpdbn2ADs7oSf?p=preview

希望这有帮助。