jQuery and AngularJS: Bind Events to Changing DOM

by

Answer here:

This is a multifaceted question. First of all, all jQuery code events should use $scope.$apply to execute angularjs code as expected. Example:

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

In the latest version of jQuery, in order to have events that update based on DOM changes, you want to 1. Get a selector for the nearest parent element (ex):

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

In this case, your parent selector would be “.myDiv”, and your child selector would be .myDynamicDiv.

Thus, you want jQuery to have the events on the PARENT of the element so if the child elements change, it will still work:

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

Notice that the $scope.$apply() is used in order to enable jQuery to access those angular variables.

Hope this helps!
Christian

More Related Contents:

  1. Update Angular model after setting input value with jQuery
  2. AngularJS + JQuery : How to get dynamic content working in angularjs
  3. ng-click not working from dynamically generated HTML
  4. How can I run a directive after the dom has finished rendering?
  5. from jquery $.ajax to angular $http
  6. What does AngularJS do better than jQuery? [closed]
  7. Accessing clicked element in angularjs
  8. jQuery ui datepicker with Angularjs
  9. angular.element vs document.getElementById or jQuery selector with spin (busy) control
  10. AngularJS: $viewContentLoaded fired before partial view appears
  11. How to subtract two angularjs date variables
  12. How do I get the offset().top value of an element without using jQuery?
  13. Problems with jQuery autocomplete + AngularJS
  14. Using jQuery’s $.ajax within an angularJS controller
  15. Jquery bind double click and single click separately
  16. jQuery UI Autocomplete use startsWith
  17. xmlHttp.getResponseHeader + Not working for CORS
  18. How can I use jQuery validation with the “chosen” plugin?
  19. How to expand ‘select’ option width after the user wants to select an option
  20. How to Call Controller Actions using JQuery in ASP.NET MVC
  21. jquery callback function only working on last loop
  22. What does autocomplete request/server response look like?
  23. Google Map v3 auto refresh Markers only
  24. Cross-Origin Request Blocked on
  25. is it possible to have html inside of a jqgrid treegrid cell
  26. How do you animate the value for a jQuery UI progressbar?
  27. How to find the index of a row in a table using jquery
  28. JQuery DatePicker and beforeShowDay
  29. What’s faster for including scripts, using CDN (Google) or storing them locally in website’s root?
  30. Can jQuery selectors be used with DOM mutation observers?

Leave a Comment