angularjs – 使用Angular JS指令为表单创建特定于域的语言(带绑定)

2023年4月1日 215次阅读

我正在尝试使用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

最佳答案 到目前为止,我将把你的帖子作为一般性的批准.没有人有太多要补充的.所有的一般原则对我来说都是有意义的,并且您在使用声明性属性名称以使组件可重用方面做得很好.

出于这个原因,如果有人出现并用“不合适”标记这一点,我不会感到惊讶,因为对你的问题没有太多具体的技术答案.但是,那是因为你似乎做得对.干杯.

点赞