AngularJSのカスタムディレクティブへの入力を確認する

Question

私は非常に大きなフォームを持っていますが、これはHTMLの編集時に読みにくくなっています。私はAngularJSを最大限に活用しようとし、カスタム・ディレクティブを使用して繰り返しテキストの量を圧縮することに決めました。

app.directive("formField", function() { 
    return { 
     restrict: 'E', 
     scope: { 
      fieldData: '=field', 
      fieldName: '=name', 
      fieldType: '=type' 
     }, 
     template: <SOME HTML> 
    } 
}); 

を、次のように私は私のページにフォームフィールドを追加するには、このディレクティブを使用します：ここで私が書いたオリジナルのディレクティブです

<form-field field="some_data" type="text" name="other_data"></form-field> 

私はdateTimeの入力を区別するためにtype変数を使用していたが、 （入力のtype属性によって）1つのキーワードのみでコード内で区別されているので、テキスト入力、数字入力などが可能です。

しかし、今私はレイアウトのおかげでr異なったコードを適切に構成することができます。これに基づいて、 "checkbox"型がディレクティブに渡されると、私は別のテンプレート値を返したいと思います。

app.directive("formField", function() { 
    return { 
     restrict: 'E', 
     scope: { 
      fieldData: '=field', 
      fieldName: '=name', 
      fieldType: '=type' 
     }, 
     template: function() { 
      if(fieldType == 'checkbox') { 
       return <CHECKBOX HTML>; 
      } else { 
       return <REGULAR FIELD HTML>; 
     } 
    } 
}); 

これは機能しません。誰でも私がディレクティブの返されたオブジェクトでそれを比較できるように、型フィールドの値をチェックする方法を教えてもらえますか？ありがとう。

Answer 1

テンプレートでは、要素の属性を確認できます。

あなたのテンプレートは次のようになります。

template: function (element, attrs) { 
     if(attrs.type == 'checkbox') { 
      return <CHECKBOX HTML>; 
     } else { 
      return <REGULAR FIELD HTML>; 
     } 
    } 

分離株の範囲はfieldData、フィールド名、およびFIELDTYPEの定義属性（式を使用して）テンプレートの戻り値の文字列で利用可能ですが、彼らは、テンプレートのロジックでは使用できません。 。例：

template: '<p>{{ fieldData }}</p>'