Angularjs 指令循环内的双向绑定
我正在尝试为我的客户编写一个简单的表单生成器。他们的想法是创建一个简单的表单,以后可以在不同的场合使用 为此,我现在正在创建一个指令,通过一个指令将json表单解析回htmlAngularjs 指令循环内的双向绑定,angularjs,angular-directive,Angularjs,Angular Directive,我正在尝试为我的客户编写一个简单的表单生成器。他们的想法是创建一个简单的表单,以后可以在不同的场合使用 为此,我现在正在创建一个指令,通过一个指令将json表单解析回html angular .module('myApp') .directive('formbuilder', ['$timeout', '$compile', '$parse', function($timeout, $compile, $parse) { return { rest
angular
.module('myApp')
.directive('formbuilder', ['$timeout', '$compile', '$parse', function($timeout, $compile, $parse) {
return {
restrict:'AE',
require: 'ngModel',
scope: {
form: '=ngModel'
},
link: function(scope, element, attrs) {
$timeout(function() {
var bones = scope.form.structure;
scope.formId = scope.form.title.replace(/\W+/g, " ").replace(/\s/g,'').toLowerCase();
var html = '<form id="{{formId}}" class="row">';
angular.forEach(bones, function(bone, key) {
if(bone.type == 'text' || bone.type == 'checkbox') {
scope[key] = $parse('form.data.'+key)(scope);
html += '<input-field class="col s12"><input type="'+bone.type+'" id="'+bone.type+key+'" ng-model="form.data['+key+']" /> <label for="'+bone.type+key+'">'+bone.label+'</label></input-field> ';
}
})
html += '<p>{{form.data.input1}}</p>';
html += '</form>';
element.append($compile(html)(scope));
})
}
};
}]);
我将避免使用实例化ngModelController的ng model属性。而是使用一次性绑定:
<formbuilder form="::form"></formbuilder>
这显然不是预期的效果。您期望什么?使用具有隔离作用域和双向绑定的ngModelController是有问题的。你能解释一下你想用它做什么吗?
<formbuilder form="::form"></formbuilder>
.directive('formbuilder', ['$timeout', '$compile', '$parse', function($timeout, $compile, $parse) {
return {
restrict:'AE',
/*
require: 'ngModel',
scope: {
form: '=ngModel'
},
*/
scope: { form: "<" },
//html += '<input ng-model="form.data['+key+']"'
//USE dot notation
html += '<input ng-model="form.data.'+key+'"'