2

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

scope:{
  localClickFunc: "&click",
  myLocalDbClickFunc: "&dblclick"
} ...

 <myButton  ng-click="localClickFunc($event)" ng-doubleckick="myLocalDbClickFunc($event)"/>

他にもたくさんのイベントがあります（マウスオーバーなど）

私のlocalClickFuncは、スコープディレクティブでコントローラー関数にバインドされています（私の場合は「=」でバインドできます）。

問題は、この 'my​​Button' ディレクティブの使用では、すべての属性が必要ではないということです。他のすべてのイベントと一緒に使用すると、角度を介して noop 関数に登録および起動されます。

画面に 1000 個ものボタンを配置できます。これに対する解決策は何ですか? 条件付きテンプレートはありますか?

4

2 に答える 2

2

?スコープ バインディング定義の は、属性をオプションにします。

ただし、&Angular に関する限り、関数バインディング ( ) は常にオプションです。つまり、このバインディングで関数を指定しなくても、Angular は文句を言わず、ディレクティブのスコープに関数を配置します。if( scope.localClickFunc == null )したがって、その存在を確認するために書き込むことはできません。

オプションのバインディングを使用し=?てコールバックを指定することをお勧めします。このようにして、バインディングの存在のスコープを確認し、存在する場合にのみ、それを実際の DOM イベントにバインドできます。コード例:

scope:{
    localClickFunc: "=?click",
    localDbClickFunc: "=?dblclick"
},
link: function(scope, element, attrs) {
    ...
    if( scope.localClickFunc != null ) {
        element.on("click", scope.localClickFunc);
    }
    ...
}

次に、ディレクティブを次のように使用します。

<myButton click="localClickFunc($event)"
          dblclick="myLocalDbClickFunc($event)"
/>

属性の一部またはすべてを指定すると、それに応じてハンドラーがインストールされます。

于 2013-10-08T11:30:14.217 に答える
0

ディレクティブ名が mydir のように attr を送信してから、リンクおよびコンパイル関数で 3 番目のパラメーターの 1 つが通常 params として名前であり、params.mydir によってそこに到達します (値は ovidiu になります)。「;」のようなテキストベースのものなら何でも送信できます 「click;dbclick;onmouseout」のように区切り、params.mydir.split(';') を使用してディレクティブで区切ります。そこから、「allClicks」などのイベントのグループに移動することもできます。リンクに、適切なものを追加する辞書またはスイッチが必要です。

于 2013-10-08T11:16:33.100 に答える