指令循环内部的双向绑定(2

指令循环内部的双向绑定(2-way binding inside directive loop)

我正在尝试为我的客户编写一个简单的表单构建器。 他们的想法是创建一个简单的表单，以后可以在不同的场合使用。

为此我正在创建一个指令，通过指令将json表单解析回html。

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

问题是：我循环遍历项目，找到将它们解析回html。 这显然不能按预期工作。 我可以$解析它但是双向绑定丢失了......

有什么想法吗 ？

json结构是：

$scope.form = { title: 'My first form', structure: { input1: { type: 'text', label: 'Input label' }, input2: { type: 'checkbox', label: 'This is a checkbox' }, input3: { type: 'checkbox', label: 'This is a CHECKED checkbox' } }, data: { input1: 'Yannick', input2: false, input3: true } }

I am trying to write a simple form builder for my clients. The idea being for them to create a simple form that they can use later on different occasions.

For that I am at this point creating a directive to parse the json form back to html trough a directive.

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

Problem is: I am looping through the items to find parse them back into html. That is clearly not working as expected. I can $parse it but then the 2-way binding is lost...

Any thoughts ?

The json structure is:

$scope.form = { title: 'My first form', structure: { input1: { type: 'text', label: 'Input label' }, input2: { type: 'checkbox', label: 'This is a checkbox' }, input3: { type: 'checkbox', label: 'This is a CHECKED checkbox' } }, data: { input1: 'Yannick', input2: false, input3: true } }

最满意答案

我会避免使用实例化ngModelController的ng-model属性。 而是使用一次性绑定：

<formbuilder form="::form"></formbuilder>

在该指令中，将isolate范围与单向（ < ）绑定一起使用：

.directive('formbuilder', ['$timeout', '$compile', '$parse', function($timeout, $compile, $parse) { return { restrict:'AE', /* require: 'ngModel', scope: { form: '=ngModel' }, */ scope: { form: "<" },

这会将form对象引用绑定到隔离范围。 指令输入对内容的更改将与父作用域对象共享。 不需要对对象引用进行双向绑定。

另外由于显而易见的原因，不要对属性访问器使用括号表示法，而是使用点表示法：

//html += '<input ng-model="form.data['+key+']"' //USE dot notation html += '<input ng-model="form.data.'+key+'"'

PLNKR上的DEMO。

I would avoid using the ng-model attribute which instantiates the ngModelController. Instead use one-time binding:

<formbuilder form="::form"></formbuilder>

In the directive, use isolate scope with one-way (<) binding:

.directive('formbuilder', ['$timeout', '$compile', '$parse', function($timeout, $compile, $parse) { return { restrict:'AE', /* require: 'ngModel', scope: { form: '=ngModel' }, */ scope: { form: "<" },

This will bind the form object reference to the isolate scope. Changes to the contents by the directive inputs will be shared with the parent scope object. There is no need to do two-way binding of the object reference.

Also for obvious reasons, don't use bracket notation for the property accessor, instead use dot notation:

//html += '<input ng-model="form.data['+key+']"' //USE dot notation html += '<input ng-model="form.data.'+key+'"'

The DEMO on PLNKR.