Question

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

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

$scope.data = {};

然后在我的html中，以

的形式创建元素

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

字段看起来像

{"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"}}

然后，element指令看起来像这样，但是会抛出错误

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

如果没有指令中的myVar属性和范围对象，这样可以正常工作（显示表单）。我在这里错过了关于双向数据绑定的内容吗？或者有更好的方法吗？ - 谢谢

Answer 1

在没有编译的情况下附加HTML似乎很奇怪。我会先改变link：

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

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

希望它会有所帮助，

Answer 2

在你的html中，myVar需要像my-var一样格式化。你真的需要这个指令的孤立范围吗？看看这个plunker并添加Maxim Shoustin示例。

Plunker

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

2 个答案: