Angularjs two way data-binding for form data POST

Question

Using angularjs, I am trying to populate a form dynamically and then submit the forms data via POST to a server.

I created a data variable in my controller (to POST later)

$scope.data = {};

Then in my html, to create the elements in the form

<div ng-repeat="(name, attributes) in fields">
    <element myVar="data.{{name}}" name="{{name}}" attributes="{{attributes}}" ></element>
</div>

Where fields looks like

{"agency":{"name_displayed":"Agency","size":"30","tag":"input","type":"text"},"department":{"name_displayed":"Department","size":"30","tag":"input","type":"text"},"description":{"cols":"50","name_displayed":"Description","rows":"4","tag":"textarea"}}

The element directive then looks like this, but is throwing errors

demoApp.directive("element", function() {

    var template = function(name, attributes, results) {
        var templateString = "<" + attributes.tag;
        for (var attribute in attributes) {
            if (attribute != "name_displayed" && attribute != "tag" && attribute != "options") {
                templateString += " " + attribute + '="' + attributes[attribute] + '"';
            }
        }
        if (attributes.tag == "input") {templateString += ' value="' + results + '"';}

        templateString += ' name="' + name + '">';
        templateString += ' ng-model="myVar">';

        if (attributes.tag == "select") {
            for (var i=0; i<attributes.options.length; i++) {
                templateString += "<option value=" + attributes.options[i] + ((attributes.options[i] == results)? " selected" : "") + ">" + attributes.options[i] + "</option>";
            }
        }
        if (attributes.tag == "textarea") {
            templateString += results;
        }

        templateString += "</" + attributes.tag + ">";
        var toReturn = attributes.name_displayed + ": " + templateString;
        return toReturn;
    };

    return {
        restrict: "E",
        scope: {
            myVar: '='
        },
        link: function(scope, element, attrs) {
            var attributes = angular.fromJson(attrs.attributes);
            var tpl = template(attrs.name, attributes, attrs.results);
            element.html(tpl);
        }
    };
});

Without the myVar attribute and scope object in the directive, this works fine (to display the form). Am I missing something about the two-way data binding here? Or is there a better way to do this? - Thanks

Answer 1

It seems strange that you append HTML without compilation. I would change the link first of all:

....
link: function(scope, element, attrs) {
        var attributes = angular.fromJson(attrs.attributes);
        var tpl = template(attrs.name, attributes, attrs.results);
        var tpl_compiled = angular.element($compile( tpl )(scope));
        element.html(tpl_compiled);
    }
 ...

By this way we tell to angular to do a digest cycle over new appended data. Maybe this a reason why with isolate scope the myVar didn't fired.

Hope it will help,

Answer 2

In your html myVar needs to be formatted like my-var. Do you really need an isolated scope on this directive? Look at this plunker and add in Maxim Shoustin example.

Plunker