$(document).ready alternative for AngularJS

angularjs, gentelella, html, javascript, jquery

Solution

Many jQuery plugins depend on a workflow of 1. draw the DOM. 2. run an `init()` function to set up code against those DOM elements.

That workflow fares poorly in Angular, because the DOM isn't static: Angular sets up and destroys DOM nodes on its own lifecycle, which can overwrite event bindings or DOM changes made outside Angular. Document ready isn't particularly useful when you're using Angular, because all it indicates is that Angular itself is ready to start running.

To use Angular effectively, you have to get into the habit of initing code only when it's actually needed. So instead of a big bucket of `init_foo(); init_bar();` on document.ready, you should have a Foo directive with its own init code, and a Bar directive with its own specific init code, and so on. Each of those directives should only modify the DOM created by that specific directive. This is the only safe way to ensure that the DOM elements you need to modify actually exist, and that you're not creating conflicts or unexpected interdependencies between directives.

To take one example: I'm guessing your `init_flot_chart()` crawls down through the DOM looking for a particular element inside of which it'll draw a flot chart. Instead of that top-down approach, create a directive:

angular.module('yourApp')
  .directive('flotWrapper', function () {
    return {
      template: "<div></div>",
      scope: {
        data: '@'
      },
      link: function(scope, elem, attrs) {
        var options = {}; // or could pass this in as an attribute if desired
        $.plot(elem, scope.data, options); // <-- this calls flot on the directive's element; no DOM crawling necessary
      }
    };
});

which you use like this:

<flot-wrapper data="{{theChartData}}"></flot-wrapper>

...where `theChartData` is an object containing whatever data is to be drawn in the chart. (You can add other attributes to pass in whatever other parameters you like, such as the flot options, a title, etc.)

When Angular draws that flotWrapper directive, it first creates the DOM element(s) in the directive template, and then runs whatever is in its `link` function against the template's root element. (The flot library itself can be included via a plain old `<script>` tag so its `plot` function is available when the directive needs it.)

(Note that this wouldn't update automatically if the contents of `theChartData` change; a more elaborate example which also watches for changes and responds appropriately can be seen here.)

Problem

Original source

Related problems

• How to Integrate Flot with AngularJS?
• How to run function in AngularJS controller on document ready?