12

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

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

4

3 に答える 3

31

ここで答えてください:

これは多面的な質問です。まず第一に、すべての jQuery コード イベントは $scope.$apply を使用して、angularjs コードを期待どおりに実行する必要があります。例:

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

jQuery の最新バージョンでは、DOM の変更に基づいて更新されるイベントを作成するために、1. 最も近い親要素のセレクターを取得します (例):

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

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

したがって、jQuery に要素の PARENT にイベントを持たせて、子要素が変更された場合でも機能するようにします。

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

jQuery がこれらの角度変数にアクセスできるようにするために、 $scope.$apply() が使用されていることに注意してください。

お役に立てれば!キリスト教徒

于 2013-02-04T20:44:38.363 に答える
2

免責事項:私は角度を学んでいるので、基本的には中途半端な推測です。

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

次に、angular の前に jquery がロードされるようにします。こちらを参照してください。

3 番目に、(動的) バインドの問題である可能性があります。こちらを参照してください。

フィードバックをお願いします。

于 2013-02-02T11:28:04.127 に答える