使用 Angular JS 指令为表单创建特定于域的语言（带绑定）

Question

我正在尝试使用 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 一起使用（我已经查看了指令上可用的“编译”等内容，但我对这一切的真正作用有点超出了我的深度）。

TL;DR：我想要自定义表单标签，这些标签可以基于具有双向绑定的指令模板转换为不同的元素。非常感谢有关实施的建议。

谢谢，加兹

Answer 1

我认为到目前为止对你的帖子的沉默是普遍的认可。没有人有太多要补充的。您的所有一般原则对我来说都很有意义，并且您在使用声明性属性名称使组件可重用方面做得很好。

因此，如果有人出现并将其标记为“不合适”，我不会感到惊讶，因为您的问题没有太多具体的技术答案。但是，那是因为你似乎做得对。干杯。