AngularJS動態表單生成

Question

我在角度上有些麻煩。

我需要使用由外部系統構建的JSON Spec生成表單（源是可信任的）。

首先，我遇到了FormController的問題，因為它沒有檢測到我通過指令生成的元素，然后我通過同時在指令中生成表單和字段來解決了該問題，問題在於它與您一樣相當混亂可以在此JSFiddle中看到。

var $form = $('<form/>', {
    name: formName,
    id: formName,
    novalidate: true,
    "ng-submit": 'daForm.validate($event, ' + formName + ')'
});

var idx = 1;

for (var fieldName in spec.fieldset) {
    var $wrapper = $('<div/>', {
        id: fieldName + '-col'
    }).addClass('col-xs-12 col-md-6').appendTo($form);

    var $formGroup = $('<div/>', {
        id: fieldName + '-group'
    }).addClass('form-group').appendTo($wrapper)

    $('<label/>', {
        'for': fieldName,
        id: fieldName + '-label'
    }).addClass('control-label').text("{{'" + fieldName + "' }}").appendTo($formGroup);

    var fieldSpec = spec.fieldset[fieldName];
    var control;

    switch (fieldSpec.control) {
        case 'passwordbox':
            control = 'input';
            fieldSpec.attrs.type = "password"
            break;
        case 'number':
            control = 'input';
            fieldSpec.attrs.type = "numberbox"
            break;
        case 'email':
            control = 'input';
            control = 'input';
            fieldSpec.attrs.type = "emailbox"
            break;
        case 'select':
            control = 'select';
            break;
        case 'textarea':
            control = 'multitextbox';
            break;
        case 'textbox':
            $('<da-textbox/>').attr('defined-by', fieldName).appendTo($formGroup)
            continue;
            break;
        default:
            control = 'input';
            fieldSpec.attrs.type = "text"
            break;
    }

    var $control = $('<' + control + '/>', fieldSpec.attrs).attr('ng-model', 'model.' + fieldName).addClass('form-control').appendTo($formGroup);

    for (var rule in fieldSpec.validation) {
        $control.attr(rule, fieldSpec.validation[rule])
    }

    if (control == 'select') {
        for (var val in fieldSpec.options) {
            $('<option/>').val(val).text(fieldSpec.options[val]).appendTo($control);
        }
    }

    if (idx % 2 == 0)
        $wrapper.parent().append($('<div/>').addClass('clearfix'))
    idx++;
}

$form.append($('<div/>').addClass('clearfix'))

var $lastRow = $('<div/>').addClass('col-xs-12 col-md-12').appendTo($form);
var $submit = $('<button/>').attr('type', 'submit').addClass('btn btn-primary').appendTo(
$lastRow).text('Submit')

$form.append($('<div/>').addClass('clearfix'))
console.log(scope)

$compile($form)(scope);

element.append($form);

請注意，案例文本框是我的代碼失敗的地方，對於其他每個字段，我都會生成一個普通的input / select / textarea字段並將其推送到容器中。 在文本框的情況下，我嘗試推送一個新指令，以使此混亂情況更整齊，但FormController不會將其識別為其他普通項。

關於如何使角度識別由新指令生成的場的任何想法？

附加物

1.- ngModel運行正常，可以正確更新。
2.-更新了JSFiddle

Answer 1

好的，我知道了。 您正在混合使用jQuery和AngularJS，這通常會帶來一些不確定性，因此花了我一分鍾時間才能了解正在發生的事情。 所以，我是對的，daTextbox元素沒有綁定到$ scope（可以通過查看類列表來判斷，如果它不包含.ng-scope，那是錯誤的）。

無論如何，首先要確定的是確保daTextbox的編譯時間比ngModel早（因此，任何大於0的優先級，我都選擇1000）。 然后，與其使用jQuery創建輸入， 不如使用angular.element更加輕松有效。

您將要做的是創建輸入，對其進行編譯，然后將其附加到指令元素中。 這是一個工作示例：

app.directive('daTextbox', ['$compile', function($compile) {
    return {
       restrict: 'E',
       scope: true,
       priority: 1000,
        controller: function($scope, $attrs) {
            this.identifier = $attrs.definedBy
            this.definition = $scope.spec.fieldset[this.identifier]
        },
        link: function(scope, element, attrs, controller) {
            var input = angular.element('<input/>')
                .addClass('form-control')
                .attr('ng-model', 'model.' + attrs.definedBy);

            input = $compile(input)(scope);
            element.append(input);
        }
    };
}]);

這樣，我猜您的控制器不是必需的，但可能仍然是。 無論如何，您可以看到它正在plnkr上運行 。