angularjs - angularディレクティブをスコープ変数に保存するにはどうすればよいですか?

Question

AngularJS でフォ​​ーム ビルダーを実装しており、実行時にディレクティブを挿入して並べ替える必要があります。どこから調べればよいかさえわかりません - すべての例は、ディレクティブの静的ツリーのみを示しているようです。動的な動作を実現するための 2 つのオプションは、a) オンザフライでテンプレートをコンパイルして挿入することと、b) 可能なすべてのディレクティブの巨大な ng-switch を使用することです。どちらの方法も醜いです。

誰でもより良い実装を提案できますか?

以下は、formbuilder が理想的な世界でどのように見えるべきかを示す JS および HTML コードです。TODO の 3 つのインスタンスを埋めるのを手伝ってください。

JSFiddle JavaScript:

angular.module('components', [])
  .directive('checkbox', function() {
    return {
      restrict: 'E',
      template: '<div class=f><input type=checkbox>{{name}}</input></div>'
    };
  })
  .directive('textfield', function() {
    return {
      restrict: 'E',
      template: '<div class=f><input type=text placeholder="{{name}}"></input></div>'
    };
  })

function FormBuilder($scope, $locale) {
    $scope.title = 'test form';
    $scope.fields = [];  
    $scope.add_checkbox = function() {
        console.log('adding checkbox');
        var field = null; // TODO: how do I instantiate a directive?
        $scope.fields.push(field);
    };
    $scope.add_textfield = function() {
        console.log('adding textfield');
        var field = null; // TODO: how do I instantiate a directive?
        $scope.fields.push(field);
    };
}

HTML:

<div ng-app=components ng-controller=FormBuilder>
    <button ng:click="add_checkbox()">new checbox</button>
    <button ng:click="add_textfield()">new text field</button>
    <h3>{{ title }}</h3>
    <checkbox></checkbox>

    <textfield></textfield>

    <div ng:repeat="field in fields">
        <!-- TODO field.get_html() - how? -->
    </div>
</div>