Angularjs 动态呈现JSON数组中的指令_Angularjs_Angularjs Directive

Angularjs 动态呈现JSON数组中的指令

angularjs

Angularjs 动态呈现JSON数组中的指令,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我想向SPA传递一个JSON数组，并根据数组中的内容呈现控件和指令我已经根据这里找到的答案呈现了所有控件然而，我也有我想要呈现的自定义指令，但我不想在HTML中指定它们中的每一个。相反，我想做一些事情，比如 <div ng-if="field.type=='directive'" class="form-group {{field.css}}"> <{{field.directive}}></{{field.directive}}> </div&

我想向SPA传递一个JSON数组，并根据数组中的内容呈现控件和指令

我已经根据这里找到的答案呈现了所有控件

然而，我也有我想要呈现的自定义指令，但我不想在HTML中指定它们中的每一个。相反，我想做一些事情，比如

<div ng-if="field.type=='directive'" class="form-group {{field.css}}">
  <{{field.directive}}></{{field.directive}}>
</div>

我创建的代码只是输出

<test-directive>

作为文本而不是控件本身

有什么想法吗？

作为@charlietfl和@Saurabh Agrawal，在angular 2和4中有简单的方法。但是，还是供你们参考，我在1中给出了一个解。现在，模板将基于JSON中的数据类型呈现

HTML代码：

<body ng-app="dynamicDirective" ng-controller="MyModule">
 <div ng-repeat="field in entity.fields">
   <dynamic-field data='field'> </dynamic-field>
   <br/>
 </div>
</body>

这是一个模板html文件，其中字段将根据JSON数据中的类型呈现。请参阅下面的链接

<!-- Text Template -->
<div ng-if="data.type === 'text'">
  {{data.name}} <input type="text"/>
</div>

<!-- Radio Template -->
<div ng-if="data.type === 'radio'">
  {{data.name}} 
  <div ng-repeat="option in data.options">
    <input type="radio" value="option.name" />{{option.name}}
  </div>
</div>

<!-- Email Template -->
<div ng-if="data.type === 'email'">
  {{data.name}} <input type="text"/>
</div>

<!-- Password Template -->
<div ng-if="data.type === 'password'">
  {{data.name}} <input type="password"/>
</div>

<!-- Select Template -->
<div ng-if="data.type === 'select'">
  {{data.name}} <select><option ng-repeat="option in data.options">
    {{option.name}}</option></select>
</div>

<!-- Checkbox Template -->
<div ng-if="data.type === 'checkbox'">
  {{data.name}} 
  <div ng-repeat="option in data.options">
    <input type="checkbox" value="option.name" />{{option.name}}
  </div>
</div>

希望有帮助：

我相信在angular 2/4中使用动态FormStack更容易做到这一点。请看angular formly。我已经好几年没有使用它了，但是它对于创建动态表单是高度可扩展的Hanks@SaurabhAgrawal我来看看。谢谢@charlietfl我来看看

<body ng-app="dynamicDirective" ng-controller="MyModule">
 <div ng-repeat="field in entity.fields">
   <dynamic-field data='field'> </dynamic-field>
   <br/>
 </div>
</body>

app.directive('dynamicField', function() {
  return {
    restrict: 'E',
    scope: {
      data: "="
    },
    templateUrl: 'template.html',
    link: function(scope, element, attrs) {

    }
  }
});

<!-- Text Template -->
<div ng-if="data.type === 'text'">
  {{data.name}} <input type="text"/>
</div>

<!-- Radio Template -->
<div ng-if="data.type === 'radio'">
  {{data.name}} 
  <div ng-repeat="option in data.options">
    <input type="radio" value="option.name" />{{option.name}}
  </div>
</div>

<!-- Email Template -->
<div ng-if="data.type === 'email'">
  {{data.name}} <input type="text"/>
</div>

<!-- Password Template -->
<div ng-if="data.type === 'password'">
  {{data.name}} <input type="password"/>
</div>

<!-- Select Template -->
<div ng-if="data.type === 'select'">
  {{data.name}} <select><option ng-repeat="option in data.options">
    {{option.name}}</option></select>
</div>

<!-- Checkbox Template -->
<div ng-if="data.type === 'checkbox'">
  {{data.name}} 
  <div ng-repeat="option in data.options">
    <input type="checkbox" value="option.name" />{{option.name}}
  </div>
</div>