Angularjs 如何根据条件动态注入角度1.5组件？

下面是我的代码的一小部分：

<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>

{{p.Name}}

在

..

中，我需要注入相应的组件，例如

，

等动态，基于以下条件：

如果（f.type==“TEXTFIELD”）>>>注入

组件
if（f.type==“TEXTAREAFIELD”）>>>注入

组件

等等

---

最好的方法是什么？谢谢。

您可以这样做：

<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">

            <div ng-if="f.type == 'TEXTFIELD'">
               <text-field></text-field>
            </div>

            <div ng-if="f.type == 'TEXTAREAFIELD'">
               <text-area-field></text-area-field>
            </div>

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

{{p.Name}}

这取决于angular是否也需要使用打印到页面的输入（ng型号）

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

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

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

---

最酷的是，它也适用于指令（打印部分）。因此，如果要动态地向DOM添加指令，可以：）

将组件包装在

div

中没有意义。你可以在上面放置

ngIf

。“你可以在上面放置ngIf”-尝试过，不起作用，除非我用带有ngIfThanks的div包装它，看起来很有趣，但我需要模板是单独的cshtml文件，而不是字符串（开发要求）你试过使用ng include吗？如果这不起作用，请将您的模板包装成单独的指令，然后调用指令名称（将加载模板），但确保ng包含满足您需要的功能（减少麻烦）。Igor Janković展示的解决方案似乎是实现我需要的功能的一种好方法，但不是一种好做法。再过几个月，文件就会很快变得乱七八糟。如果这是一个个人项目，这很好，但他的答案不是生产干净的代码。没关系，我们需要其他人能够定期编辑这些html模板，而不需要知道typescript（他们不知道TS），也不需要编译typescript组件，我用typescript编写这些组件。

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