Javascript 表单数据POST的Angularjs双向数据绑定

使用angularjs，我尝试动态填充表单，然后通过POST将表单数据提交到服务器

我在控制器中创建了一个数据变量（稍后发布）

然后在我的html中，创建表单中的元素

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

元素指令看起来是这样的，但是抛出了错误

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

demoApp.directive（“元素”，函数（）{
变量模板=函数（名称、属性、结果）{
var templateString=“在没有编译的情况下附加HTML似乎很奇怪。首先，我要更改
链接
：

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

通过这种方式，我们告诉angular对新附加的数据进行摘要循环。也许这就是为什么在隔离范围内，
myVar
没有触发的原因

希望它能有所帮助，
在html中，myVar需要像my-var一样格式化。您真的需要在这个指令上设置一个独立的作用域吗？看看这个plunker并添加Maxim Shoustin示例


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

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