jQueryとAngularJS：DOMを変更するイベントをバインドする

Question

AngularJSのDOMで、ng-repeatディレクティブ内にng-includeを使用しています。 HTMLを読み込んでいます。とにかく、私が持っている問題は、ng-repeatとincludeによってDOMに追加されたものと同じクラスで、DOMの要素の上にいくつかのマウスオーバーまたはマウスクリックイベントをバインドするためにJQuery（最新バージョン）を使用していることです。しかし、JQueryは新しいDOM追加にイベントハンドラを適用していないようです。

以前のバージョンでは、.live（）は私の望むように見えましたが、最新バージョンでは削除されています。 DOMに追加されたクラスの要素が追加されるたびに、要素のバインディングをクリアして再作成する必要がありますか？

Answer 1

回答：

これは多面的な質問です。まず、すべてのjQueryコードイベントは$ scopeを使用する必要があります。$は、angularjsコードを期待通りに実行するために適用します。例：

<div class="myDiv"> 
<div class="myDynamicDiv"> 
</div> 
<!-- Expect that more "myDynamicDiv" will be added here --> 
</div> 

：あなたがに最も近い親要素（EX）用のセレクタを取得します。1.希望のjQueryの最新バージョンで

jQuery(selector).someEvent(function(){ 
    $scope.$apply(function(){ 
     // perform any model changes or method invocations here on angular app. 
    }); 
}); 

、変更、更新DOMに基づいてイベントを持っているために、

この場合、親セレクタは ".myDiv"になり、子セレクタは.myDynamicDivになります。

したがって、あなたは子要素が変更された場合、それはまだ動作しますので、jQueryの要素の親にイベントをしたい：。

$('.myDiv').on("click", ".myDynamicDiv", function(e){ 
     $(this).slideToggle(500); 
     $scope.$apply(function(){ 
      $scope.myAngularVariable = !$scope.myAngularVariable; 
     }); 
}); 

お知らせを$スコープという$（適用）が使用されていますjQueryがこれらの角度変数にアクセスできるようにします。

希望すると便利です。 キリスト教

Answer 2

免責事項：私は自分自身の角度を学習しているので、これらは基本的に半分の推測の推測です。

まず、BertrandとMarkが述べたように、ジョブに対して角度指示を使用することを検討してください。

第2に、角度の前にjqueryがロードされることを確認してください（hereを参照）。

第3に、これは（動的）バインディングの問題です。hereを参照してください。

フィードバックしてください。

Answer 3

この質問はすでにChristian Stewartによってうまく答えられていますが、私は彼の反応に何かを追加したかっただけです。

は、私は次のコードを使用して、ユーザーがボタン（またはdivコントロール）をクリックしたとき、それが内側に少しを縮小するように、私のボタンに「cssClickableIcon」クラスを追加します。

それは少し微調整だが、Webページ上の本当に素晴らしい効果があります。あなたは実際には、ウェブページがフラットではなくインタラクティブであるかのように感じ、にはがあります。

// Make the buttons "bounce" when they're clicked on 
$('body').on("mousedown", ".cssClickableIcon", function (e) { 
    $(this).css("transform", "scale(0.9)"); 
}); 
$('body').on("mouseup", ".cssClickableIcon", function (e) { 
    $(this).css("transform", ""); 
}); 

これはjQueryのon機能を使用しているため、このはボタンやAngularJS ng-repeatコマンドによって作成された他のDOM要素と作業を行います。

そして、あなたはブートストラップの独自のボタンのCSSクラスを使用している場合はもちろん、あなたは簡単にこれを使用して、ブートストラップ/アンギュラボタンのすべてにわたってこの効果を追加することができます。

$('body').on("mousedown", ".btn", function (e) { 
    $(this).css("transform", "scale(0.9)"); 
}); 
$('body').on("mouseup", ".btn", function (e) { 
    $(this).css("transform", ""); 
}); 

私はあまりこの効果を愛しそれを追加するのはとても簡単です！

.btn:active { 
    transform: scale(0.9); 
} 

：

更新

クリスチャン・スチュワートが代わりにjQueryのCSSを使用して提案し、彼は絶対的に正しいです...

だから、あなたはちょうどこの簡単なCSSを使用して同じ効果を得ることができます