4

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 を使用したい理由の 1 つは、従来の互換性と、使用権などのカスタム フィールドの表示規則の再利用性のためです。

これがフレームワークの合理的な期待でさえあるかどうか、バインディングを ng-model で動作させる方法についてのアドバイスを探しています (ディレクティブで利用可能な「コンパイル」などを見てきました。しかし、それが実際に何をするのかについての私の深さから少し外れています）。

TL;DR: 双方向バインディングのディレクティブ テンプレートに基づいて、さまざまな要素に変換されるカスタム フォーム タグが欲しいです。実装に関するアドバイスは大歓迎です。

ありがとう、ガズ

4

1 に答える 1

2

あなたの投稿に対するここまでの沈黙は、一般的な承認として受け取ります。誰も追加することはあまりありません。あなたの一般的な原則はすべて私には理にかなっています。また、宣言的なプロパティ名を使用してコンポーネントを再利用可能にするという素晴らしい仕事をしています。

そのため、あなたの質問に対する具体的な技術的な回答はあまりないため、誰かがこれを「不適切」とタグ付けしても驚かないでしょう. でも、それはあなたが正しいことをしているように見えるからです。乾杯。

于 2013-11-05T00:25:00.493 に答える