动态注入指令

Dynamically injecting directives

本文关键字：指令 注入 动态      更新时间：2023-09-26

我有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。有人知道我做错了什么吗?

你可以编写一个自定义指令来动态编译其他指令，像这样:

.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

相关文章：