Question

我需要22种不同类型的方式来显示某种类型的模型。我没有让我的html拥有疯狂的if语句和我的范围，而是想为每种类型创建一个指令。我从地图中获取指令，基于它的类型。功能如下。

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

getDirective是我正在使用的地图。它运作得很好。

模板如下所示：

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

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

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

我正在使用的地图工厂。

.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]
    }
  }])

另一个问题是当我检查元素时。它甚至没有尝试将其注入到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

希望这有帮助。

动态注入指令

1 个答案: