如何根据条件动态注入 angular 1.5 组件？

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 == "TEXTFIELD") >>> 注入 <text-field>组件
if (f.type == "TEXTAREAFIELD") >>> 注入 <text-area-field>component

等等...

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

Answer 1

你可以这样操作：

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

Answer 2

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

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

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

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

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

接收要解析的数据

然后您需要自己注入 $compile，就像注入 $scope、服务等一样

然后您可以使用 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，你可以:)

如何根据条件动态注入 angular 1.5 组件？

How to inject angular 1.5 components dynamically, based on a condition?

angularjs

angular-components