我正在尝试使用Angular指令创建一组DSL,以便根据数据类型对一些简单的表单元素进行动态模板化。我正在寻求一些帮助,以使绑定工作,以及更多的理论帮助,以确定这是否是最佳实践等方面的“正确方法”......
如果我向你展示我想要实现的目标可能会更容易,因为当谈到Angular时,我仍然非常绿色。
使用代码示例:
<h2>{{data.title}}</h2>
<shorttext label="Title" id="title" />
<longtext label="Body" id="body" />
<usagerights label="Usage Rights Restriction" id="usageRights" />
输出为:
<div>
<label for="{{id}}">{{label}}</label>
<input type="text" ng-model="data.{{id}}" />
</div>
<div>
<label for="{{id}}">{{label}}</label>
<textarea ng-model="data.{{id}}"></textarea>
</div>
<div>
<label for="{{id}}">{{label}}</label>
<select id="{{id}}" ng-model="data.{{id}}">
<option value="">None</option>
<option value="limited">Limited</option>
<option value="unlimited">Unlimited</option>
</select>
</div>
我有一个戏剧,并想出类似的东西:
var myApp = angular.module("myApp", []).directive('shorttext', function(){
return {
restrict: "E",
replace: true,
template: "<div><label for='{{id}}'>{{label}}</label><input id='{{id}}' ng-model='data.{{id}}' type='text' class='span6' /></div>",
scope: {
id: "@id",
label: "@label"
}
};
});
这是一个虚拟控制器,试图让范围起作用:
myApp.controller('FormCtrl', ['$scope', function($scope) {
$scope.data = {title:'test', body:'some text', usageRights:'limited'};
}]);
希望以这种方式使用DSL的部分原因是遗留兼容性以及自定义字段(如使用权)的表示规则的可重用性。
我正在寻找建议,如果这甚至是对框架的合理期望,我如何让绑定与ng-model一起工作(我已经看过像'compile'这样的东西了在指令上,但有点超出了我所做的一切的深度。)
TL; DR:我希望自定义表单标签根据具有双向绑定的指令模板转换为不同的元素。对实施的建议非常赞赏。
谢谢,Gaz
答案 0 :(得分:2)
到目前为止,我将把你的帖子作为一般批准。没有人有太多要补充的。所有的一般原则对我来说都是有意义的,并且您正在使用声明性属性名称来使组件可重用。
出于这个原因,如果有人出现并用“不合适”标记这一点,我不会感到惊讶,因为对你的问题没有太多具体的技术答案。但是,那是因为你似乎做得对。欢呼声。