0

一部のアニメーションが原因で、ユーザーがチェックボックスの状態をすばやく切り替えすぎると、視覚的な不具合が発生します。

これを防ぐために、状態を変更できる頻度を制限したいと考えました。これを行うためのきちんとした方法はディレクティブだと思いました。

ng-click特定の頻度以上でのトリガーを防止するディレクティブを作成することに成功しましたが、チェックボックスに特定の問題があります。

ディレクティブ コード (coffeescript) は次のとおりです。

angular.directive 'pxnMaxClickFreq', ($timeout)->

  restrict: 'A'

  # Make sure our event binding runs before any other directive
  priority: -100

  link: (scope, element, attributes)->
    timer = false
    element.on 'click', (e)->
      if timer
        e.preventDefault()
        e.stopImmediatePropagation()
      else
        timer = true
        $timeout( (-> timer = false), attributes.pxnMaxClickFreq )

そして、私の問題を示すプランカー。

概要

ngModel指定されたチェックボックスがクリックされると、デフォルトが防止されてチェックボックスがチェックされない場合でも更新されます。どうすればこれを回避できますか?

理想的にはngModelController、ディレクティブをできるだけ抽象化したいので、と統合する必要はありません。

4

1 に答える 1

2

ng-modelディレクティブはリンク前フェーズでイベントをバインドしています。そのため、stopPropagation が機能していません。

ポスト リンクではなく、プリ リンクでロジックを処理します。

これが更新されたプランカーです。http://plnkr.co/edit/lrZYpeElxbc2TRJl3eff?p=preview

于 2015-03-03T13:52:50.597 に答える