1

特定の要素 + 属性 + 属性値だけに適用されるディレクティブを作成する方法はありますか?

私の最初の意図は、モジュール性とメンテナンスの目的で個別のディレクティブを持つことですが、Angular から要素に一致する複数のディレクティブがあるというエラーが表示されるため、それは不可能です。

したがって、私のシナリオは次のとおりです。たとえば、独自の入力要素を記述したい

<input type="time-picker"> <input type="date-picker">

だから私はした

app.directive('input', function () {
  return {
    restrict: 'E',
    templateUrl: function ($element, $attrs) {
      if ($attrs.type === 'date-picker' || $attrs.type === 'time-picker') {
        return $attrs.type + '.html';
      }
    },
    controller: function ($scope, $element, $attrs) {
      if ($attrs.type === 'date-picker') {
        console.log('date-picker');
      }
      else if($attrs.type === 'time-picker') {
        console.log('time-picker');
      }
    }
  }
});

これは、ページに他の入力要素がない限りうまく機能します。

私が入れたら

<input type="time-picker">
<input type="date-picker">

それは正常に動作します。今私が追加すると

<input type="text">

ページ全体がハングします。

ここで私のフィドルを参照してください: http://jsfiddle.net/pWc3K/8/

4

2 に答える 2

1

html を次のように変更した場合:

<input type="text" time-picker> <input type="text" date-picker>

次に、次のように、これらの属性に基づいてディレクティブを接続できます。

app.directive('timePicker', function(){
    return {
        restrict: 'A',
        ...
    }
});
app.directive('datePicker', function(){
    return {
        restrict: 'A',
        ...
    }
});

要素の入力タイプに時刻ピッカー/日付ピッカーを入れることは、実際には有効ではありません。ディレクティブの角度ドキュメントを読むと、関連付けることができるさまざまなものの完全なリストが見つかります。4つのものは次のとおりです。

E - Element name: <my-directive></my-directive>
A - Attribute: <div my-directive="exp"> </div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment: <!-- directive: my-directive exp -->
于 2013-05-28T20:33:35.620 に答える
0

試して理解してください AngularJs で作成されたカスタム ディレクティブには、次の制限がある場合があります。

通常、restrict オプションは次のように設定されます。

'A' - 属性名のみに一致

'E' - 要素名のみに一致

'C' - クラス名のみに一致

'M' – コメントのみ

これらの制限はすべて、必要に応じて組み合わせることができます。たとえば、「AEC」 - 属性または要素またはクラス名のいずれかに一致します。

于 2015-05-01T19:17:30.373 に答える