我正在AngularJS中实现表单构建器,需要在运行时插入和重新排序指令。 甚至不知道从哪里开始寻找 - 所有的例子似乎只展示了静态的指令树。实现动态行为的两个选项是:a)动态编译和插入模板,以及b)使用所有可能指令的巨大ng-switch。两种方式都很难看。
有人可以建议更好的实施吗?
下面是JS和html代码,我认为formbuilder应该如何看待理想世界,请帮我填写3个TODO实例。
JSFiddle JavaScript:
angular.module('components', [])
.directive('checkbox', function() {
return {
restrict: 'E',
template: '<div class=f><input type=checkbox>{{name}}</input></div>'
};
})
.directive('textfield', function() {
return {
restrict: 'E',
template: '<div class=f><input type=text placeholder="{{name}}"></input></div>'
};
})
function FormBuilder($scope, $locale) {
$scope.title = 'test form';
$scope.fields = [];
$scope.add_checkbox = function() {
console.log('adding checkbox');
var field = null; // TODO: how do I instantiate a directive?
$scope.fields.push(field);
};
$scope.add_textfield = function() {
console.log('adding textfield');
var field = null; // TODO: how do I instantiate a directive?
$scope.fields.push(field);
};
}
HTML:
<div ng-app=components ng-controller=FormBuilder>
<button ng:click="add_checkbox()">new checbox</button>
<button ng:click="add_textfield()">new text field</button>
<h3>{{ title }}</h3>
<checkbox></checkbox>
<textfield></textfield>
<div ng:repeat="field in fields">
<!-- TODO field.get_html() - how? -->
</div>
</div>
答案 0 :(得分:2)
我认为您提到了几种方法,因为您不想进行切换,您可以为每个指令创建模板文件。也就是checkbox.html,textfield.html并将指令放在每一个中。然后在添加循环时使用['checkbox.html', 'textarea.html']
填充字段数组,只需<div ng-include='field'></div>
以下是演示:http://plnkr.co/edit/w6n6xpng6rP5WJHDlJ3Y?p=preview
您还可以创建另一个指令,在该指令中传入输入类型并将其注入模板。下面是一个演示,它允许您避免必须声明模板并让指令根据字段类型创建它们:
http://plnkr.co/jhWGuMXZTuSpz8otsVRY
<div ng:repeat="field in fields">
<master-field type='field'></master-field>
</div>
这个master-field指令只是根据field的值编译模板。
.directive('masterField', function($compile) {
return {
restrict: 'E',
replace:true,
transclude: true,
scope:{
type:'='
},
template: '<div></div>',
controller: function ( $scope, $element, $attrs ) {},
link: function(scope, element, attrs) {
element.append( $compile('<' + scope.type+ '/></' +scope.type + '>')(scope) );
}
};
})