Question

这是我的代码的一小部分：

<div class="list-group">
    <div class="list-group-item list-group-item-default text-center">{{p.Name}}</div>
    <div class="list-group-item">
        <!--Using bootstrap form-group for each field -->
        <div ng-repeat="f in p.Fields">

            <!--Here I want to inject components dynamically-->
            <!--<text-field></text-field>-->

        </div>
    </div>
</div>

在<div ng-repeat="f in p.Fields">...</div>中的

我需要根据条件注入相应的组件，例如<text-field>，<text-area-field>等... 动态：

if（f.type ==＆＃34; TEXTFIELD＆＃34;）＆gt;＆gt;＆gt;注入<text-field>组件
if（f.type ==＆＃34; TEXTAREAFIELD＆＃34;）＆gt;＆gt;＆gt;注入<text-area-field>组件

依旧......

最好的办法是什么？感谢。

Answer 1

你可以这样做：

[Suite]
public static IEnumerable Suite
{
  get
  {
    ArrayList suite = new ArrayList();
    suite.Add(typeof(OneTestCase));
    suite.Add(typeof(AssemblyTests));
    suite.Add(typeof(NoNamespaceTestFixture));
    return suite;
  }

Answer 2

这取决于您打印到页面的输入是否也需要角度（ng-model）使用。

如果是这样，您需要 $ compile 提供程序。

我建议制定一个指令来处理这个问题。你可以：

 <div ng-repeat="f in p.Fields">
      <x-your-directive params={{f}}>
 </div>

在您的指令中，您将通过attrs.params

接收要解析的数据

然后你需要注入 $ compile ，就像你对 $ scope，services等一样。

然后，您可以将新输入应用于angular.element（即jQLite）。

要这样做，并且要使用angular来理解新创建的DOM元素，那就是使用 $ compile 的地方。

$ compile 会告诉angular动态重新解析元素。

示例：

angular.module('your_module', []).directive('yourDirective', ['$scope', '$compile', function($scope, $compile) {
    return {
        restrict: 'E',
        controllerAs: 'YourCtrl',
        controller: [function() {}],
        link: function ($scope, element, attrs, ctrl) {
            // Switch case on attrs.params (which is f in p.Fields)
            if (attrs.params === 'TEXTFIELD') {
                element.html($compile('<input type="text"/>')($scope))
            }
        }
    }
}])

关于这个很酷的是，它也适用于指令（打印部分）。因此，如果您想动态地将指令添加到DOM中，您可以：）

如何基于条件动态注入角度1.5组件？

2 个答案: