在基于动态数据的ng repeat中，对不同的AngularJS指令使用什么模式

我正在根据数据数组动态构建仪表板。仪表为D3

我选择了AngularJS指令中定义的不同D3仪表。在我的页面上，我有一个ng repeat在metrics数组上迭代

我的问题是，基于ng repeat数组中的数据属性动态选择正确指令的最佳方法是什么

有没有一种方法可以创建一个工厂模式，其中使用的指令基于数组的输入值？或者，是否有一种方法可以通过在指令中动态包含其他指令来实现仅使用指令的结果

HTML

---

基于此的D3指令-

您的第二个解决方案听起来更合适。因此，如果它只是一个动态添加的指令

app.directive('dynamically',function(){ 
  return {
    restrict: 'A',
    compile: function(element,attrs){
      var directives = [];
      if (attrs.dynamically.indexOf(' ') > -1){
        directives = attrs.dynamically.split(' ')
      } else {
        directives.push(attrs.dynamically)
      };
      var html = '<ANY ';
      for (var i in directives){
        html += directives[i] + '="true" ';
      };
      html += '></ANY>';
      element.replaceWith(html)
    }
  }
})

app.directive（'dynamicy'，function（）{
返回{
限制：“A”，
编译：函数（元素、属性）{
var指令=[]；
if（attrs.dynamic.indexOf（“”）>-1）{
指令=attrs.dynamic.split（“”）
}否则{
指令推送（属性动态）
};
var html=''；
元素。替换为（html）
}
}
})

这是一种方法

1）

if（attrs.dynamicy.indexOf（“”）

可以在一个实例中实现多个指令，在本例中用空格字符（“”）分隔

---

2） 我通过询问

if（attrs.x）{…}

将“=”true“添加到我使用的属性中，如果属性x没有值，即使在DOM中声明和定位，它也不存在。

是的，我已经按照您在第二个选项中描述的那样做了

我创建了一个指令，该指令加载一个特定的模板，然后根据数据的类型属性在模板中包含其他指令

    directive("dynamicFormInput", ['$http', '$templateCache', function($http, $templateCache){
    return {
        restrict: 'E',
        //currently need model for map center otherwise can be removed, need to set default in map directive
        scope: {model: '=', section: '='},
        template: '<ng:include src="tpl"></ng:include>',
        link: function(scope, iElement, iAttrs) {
            var sectionToLoad = "";
            switch(scope.section.sectionTypeId)
            {
                case 1:
                    sectionToLoad ='partials/survey/textInput.html';
                  break;
                case 2:
                    sectionToLoad = 'partials/survey/selectOneOption.html';
                  break;
                case 3:
                    sectionToLoad = 'partials/survey/multiSelectOption.html';
                  break;
                case 4:
                    sectionToLoad = 'partials/survey/boolean.html';
                  break;
                case 5:
                    sectionToLoad = 'partials/survey/textInput.html';
                  break;
                case 6:
                    if(scope.section.sectionId == 13)
                        sectionToLoad = 'partials/survey/addressSelection.html';
                    else if(scope.section.sectionId == 24)
                        sectionToLoad = 'partials/survey/contactForm.html'
                break;
            }
            if(sectionToLoad!="")
            {
                $http.get(sectionToLoad, {cache:$templateCache});
                scope.tpl=sectionToLoad;
            }
        }
    }
}])

指令（“DynamicForInput”[“$http”、“$templateCache”，函数（$http、$templateCache）{
返回{
限制：'E'，
//当前需要地图中心的模型，否则可以删除，需要在map指令中设置默认值
作用域：{model:'='，section:'='}，
模板：“”，
链接：功能（范围、IELENT、iAttrs）{
var sectionToLoad=“”；
开关（scope.section.sectionTypeId）
{
案例1：
sectionToLoad='partials/survey/textInput.html'；
打破
案例2：
sectionToLoad='partials/survey/selectOneOption.html'；
打破
案例3：
sectionToLoad='partials/survey/multiSelectOption.html'；
打破
案例4：
sectionToLoad='partials/survey/boolean.html'；
打破
案例5：
sectionToLoad='partials/survey/textInput.html'；
打破
案例6：
如果（scope.section.sectionId==13）
sectionToLoad='partials/survey/addressSelection.html'；
else if（scope.section.sectionId==24）
sectionToLoad='partials/survey/contactForm.html'
打破
}
如果（部分加载！=“”）
{
$http.get（sectionToLoad，{cache:$templateCache}）；
范围：tpl=分段装载；
}
}
}
}])

用法如下：

<accordion
    close-others="true">
    <accordion-group
        ng-repeat="section in sections"
        ng-class="{'isGroundTruthed':section.userId==73}"
        heading="{{section.sectionName}} ({{displaySelection(section)}})">

        <dynamic-form-input
            section="section">
        </dynamic-form-input>

    </accordion-group>
</accordion>

你可以忽略手风琴，我只是碰巧用它作为我重复的物品，这样每个部分都可以折叠起来

编辑

---

刚刚清理了一些指令代码。

那将是

ng开关

<div ng-repeat="item in metrics">
  <div ng-switch on="item.type">
    <div ng-switch-when="optionA">..include </div>
    <div ng-switch-when="optionA">..include </div>
  </div>
</div>

…包括
…包括

<accordion
    close-others="true">
    <accordion-group
        ng-repeat="section in sections"
        ng-class="{'isGroundTruthed':section.userId==73}"
        heading="{{section.sectionName}} ({{displaySelection(section)}})">

        <dynamic-form-input
            section="section">
        </dynamic-form-input>

    </accordion-group>
</accordion>

<div ng-repeat="item in metrics">
  <div ng-switch on="item.type">
    <div ng-switch-when="optionA">..include </div>
    <div ng-switch-when="optionA">..include </div>
  </div>
</div>