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

【问题标题】：Using Angular JS directives to create a domain-specific language for forms (with binding)使用 Angular JS 指令为表单创建特定领域的语言（带绑定）
【发布时间】：2013-07-31 09:18:32
【问题描述】：

我正在尝试使用 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：我想要自定义表单标签，这些标签可以根据具有双向绑定的指令模板转换为不同的元素。非常感谢您提供有关实施的建议。

谢谢，盖兹

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

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

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

【讨论】：