5

AngularJS は初めてで、jQuery には十分な経験があります。

jQueryカラーピッカー（クラス「.colorpicker」でマーク）が添付された色（変数番号）のリストを含むページがあります。ページの静的な PHP 生成バージョンでは、うまく機能します。しかし、それを ng-repeat に変換すると、jQuery は将来の発生をキャッチしません。

$.on() でキャッチできるイベントはありますか、または AngularJS でこれを達成するための他の卑劣なベスト プラクティスの方法はありますか? 私は周りを検索しましたが、私が見つけたすべての答えは、 $.on('click') などを設定する方法でした。

<ul class="unstyled">
  <li ng-repeat="color in showcolors">
    <input type="color" class="input-mini colorpicker" ng-model="color.hex"> {{color.category}}
  </li>
</ul>
4

1 に答える 1

3

DOM を操作したり、jQuery 機能/プラグインを使用したいとき。指示の時間です。DOM に追加されるときに、jQuery カラーピッカーを入力フィールドにバインドするディレクティブを ng-repeat に追加できます。何かのようなもの：

<ul class="unstyled">
  <li ng-repeat="color in showcolors">
    <input data-jq-colorpicker type="color" class="input-mini colorpicker" ng-model="color.hex"> {{color.category}}
  </li>
</ul>

次に、ディレクティブを追加します。

yourApp.directive('jqColorpicker', function(){
    var linkFn = function(scope,element,attrs){
        // element here = $(this)
        // bind your plugin or events (click, hover etc.) here
        element.colorpicker();
        element.bind('click', function(e){
          // do something
        });
    }

    return {
        restrict:'A',
        link: linkFn
    }
});

これはテストされていませんが、問題を解決するはずです。Plunker や JSFiddle を設定している場合は、確認します。

また、 Angular UIの jQuery パススルー機能も確認してください。

于 2013-04-20T07:53:08.010 に答える