2

ここに私のコードの小さな断片があります:

<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>コンポーネントを挿入

等々...

それを行う最良の方法は何ですか？ありがとう。

4

2 に答える 2

2

ページに出力している入力をAngularでも使用する必要があるかどうかによって異なります(ng-model)。

その場合、$compileプロバイダーが必要です。

これを処理するためのディレクティブを作成することをお勧めします。あなたが持つことができます：

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

ディレクティブでは、解析するデータを次の方法で受け取ります。attrs.params

次に、 $scope やサービスなどの場合と同じように、$compileを自分自身に注入する必要があります。

次に、angular.element (jQLite) を使用して新しい入力を適用できます。

そうするために、そして角度が新しく作成された 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 に動的に追加したい場合は、次のことができます:)

于 2016-08-15T13:37:21.227 に答える