0

冗長な HTML の作成を回避し、Bootstrap 要素の使用方法を簡素化するために、AngularJS ディレクティブを作成/使用したいと考えています。このようにディレクティブを使用したいと思います：

<myDirective id="person.lname" label="Last Name"></myDirective>

AngularJS に書いてもらいたいテンプレートは次のとおりです。

<label for="person.lname">Last Name</label>
<input id="person.lname" name="person.lname" ng-model="person.lname">

このテンプレートを作成し、ng-model とのバインディングを引き続き機能させるディレクティブを宣言するにはどうすればよいですか? これが良い考えではない理由はありますか?

ありがとう。

更新しました

id/name が入力要素にどのように使用されるかを反映するために、label タグを追加しました。生成されたテンプレートを使用すると、ラベルをクリックして入力要素にフォーカスを置くことができます。

4

1 に答える 1

1

これはあなたが望むことをするはずです:

.directive('myDirective', function() {
  return {
    scope: {
      model: '=identifier',
      id: '@identifier',
      label: '@',
    },
    restrict: 'E',
    template: '<label for="{{id}}">{{label}}</label><input id="{{id}}" name="{{id}}" ng-model="model">'
  };
})

意見：

<my-directive label='Last name' identifier="person.lname"></my-directive>

Fiddle

于 2014-04-24T21:57:14.817 に答える