AngularJS: How to run additional code after AngularJS has rendered a template?

by

First, the right place to mess with rendering are directives. My advice would be to wrap DOM manipulating jQuery plugins by directives like this one.

I had the same problem and came up with this snippet. It uses $watch and $evalAsync to ensure your code runs after directives like ng-repeat have been resolved and templates like {{ value }} got rendered.

app.directive('name', function() {
    return {
        link: function($scope, element, attrs) {
            // Trigger when number of children changes,
            // including by directives like ng-repeat
            var watch = $scope.$watch(function() {
                return element.children().length;
            }, function() {
                // Wait for templates to render
                $scope.$evalAsync(function() {
                    // Finally, directives are evaluated
                    // and templates are renderer here
                    var children = element.children();
                    console.log(children);
                });
            });
        },
    };
});

Hope this can help you prevent some struggle.

More Related Contents:

  1. How do I check if an element is hidden in jQuery?
  2. Why does jQuery or a DOM method such as getElementById not find the element?
  3. How do I set/unset a cookie with jQuery?
  4. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  5. Detect element content changes with jQuery
  6. How can I select an element by name with jQuery?
  7. Firing event on DOM attribute change
  8. jQuery object and DOM element
  9. How to expose IFrame’s DOM using jQuery?
  10. Finding line-wraps
  11. How to get the element clicked (for the whole document)?
  12. Check if option is selected with jQuery, if not select a default
  13. How to detect browser back button click event using angular?
  14. How to check if an embedded SVG document is loaded in an html page?
  15. How to show a spinner while loading an image via JavaScript
  16. How to move an iFrame in the DOM without losing its state?
  17. Get the DOM path of the clicked
  18. Can I change an HTML element’s type?
  19. how to compare two elements in jquery [duplicate]
  20. How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?
  21. How to add DOM element script to head section?
  22. VueJs templating. How to load external templates
  23. How to properly unload/destroy a VIDEO element
  24. Run jQuery code after AngularJS completes rendering HTML
  25. How to add a onclick event to an element using javascript
  26. Test if an element can contain text
  27. Best practice to avoid memory or performance issues related to binding a large number of DOM objects to a click event
  28. Why I cant use jQuery functionality
  29. How to check null objects in jQuery
  30. Screen Coordinates of a element, via Javascript

Leave a Comment