AngularJS动态表单生成

Question

Im having some troubles with angular.

I need to generate a form using a JSON Spec built by a foreign system (the source is trustable).

First I got a problem with FormController because it didn't detect the elements that I was generating through a directive, then I did a workaround by generating the form and fields at the same time into the directive The problem is that its quite messy as you can see in this 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);

Notice that the case textbox is where my code fails, for everyother field I generate a plain input/select/textarea field and push it to the container. In textbox case I try to push a new directive in order to tidy up this mess a little bit, but the FormController doesn't recognize it as the other plain items.

Any ideas on how can I make angular recognize the field generated by my new directive?

Addenda

1.- ngModel works fine, it updates correctly.
2.- Updated JSFiddle

Answer 1

OK, got it. You are mixing jQuery and AngularJS which often leads to some wonkiness, so it took me a minute to get what was happening. So, I was right, the daTextbox element wasn't being bound to the $scope (you can tell by looking at the class list, if it doesn't contain .ng-scope, something is wrong).

Any way, the first think you want to do is make sure the daTextbox will be compiled earlier than ngModel (so any priority greater than 0, I chose 1000). Then, instead of creating the input with jQuery, it is much easier and more efficient to use angular.element .

What you will want to do is to create the input, compile it, then append it to your directive element. Here's a working example:

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

Doing it this way, I'm guessing your controller isn't necessary, but it might still be. At any rate, you can see this is working on plnkr .