javascript - 为初始编译后创建的元素创建 2 路绑定(bind)

Question

我创建了一个指令，该指令根据来自服务器的 json 动态创建表单。我正在尝试将 ng-model 属性添加到各种输入元素，以便在用户输入输入值并单击提交后我能够使用输入值。似乎添加了 ng-model 属性，但 2 路数据绑定(bind)不起作用。

编辑:我从链接函数中调用 buildForm ，如下所示:

function link(scope, elem, attr, ctrl) {
    //asyc request to the server, data here is a json object from the server
    getMovieDataStructure({
        onSuccess: (data) => {
            scope.mdb = data;
            buildForm(scope.mdb, elem);
        },
        onFail: (res) => {
            console.log("ERROR getting it");
        }
    });            
}

以下是指令中的一些代码:

//mdb is an array of objects describing the form requirments
function buildForm(mdb, formElement) {
    for(var i=0; i < mdb.length; i++) {
        if(mdb[i].type == 'string') {
            if(mdb[i].maxLength && mdb[i].maxLength > 1024) {
                //if maxLength > 1024 put a text area instead
                formElement.append(createTextArea({
                    id: mdb[i].fieldName,
                    placeholder: mdb[i].fieldName
                }));
            } else {
                //add input field to the form
                formElement.append(createTextInput({
                    id: mdb[i].fieldName,
                    placeholder: mdb[i].fieldName
                }));
            }
        } else if(){
            //some more cases
        }

        formElement.append("<br>");
    }
    //...some more code...
}

//one of the functions to create an input element
function createTextInput(data) {
    var elem = angular.element("<input>");
    elem.attr("type", "text");
    elem.attr("id", data.id);
    elem.attr("ng-model", data.id);
    elem.attr("placeholder", data.placeholder);

    return elem;
}

例如，html 页面上的输入元素的结果可能如下所示:

<input placeholder="movie_name" ng-model="movie_name" id="movie_name" type="text"> </input>

如果我将相同的标签直接放入 html 文件中，则 2 向绑定(bind)效果很好。

这里缺少什么？有没有更好的方法来做到这一点，而我只是让事情变得过于复杂？

Answer 1

更新表单后，您需要调用 $compile，否则 Angular 将不会知道您的更改。请参阅:

https://docs.angularjs.org/api/ng/service/ $编译