How to monitor dom rendering in angular

Just saw a group of people said that their company usually use angular and jquery plug-ins together with the people, have been fired, did not see this sentence before I am ashamed to say that I have so used, in fact, angular ecosystem so perfect, There is no need to manipulate any of the DOM elements to meet your advocacy development needs.

So if you really need to use a jquery plug-in, and do not bother to encapsulate angular plug-ins or bother to find angular plug-ins, how can we judge the DOM loading is complete,

Some say that using ng-init= ""

Pro-Test: Indicates that I did not achieve the desired result ....

Of course, if you use Window.onload=function () {}, do not know the line, you can try ...

Let's look at the background of angular:

Angularjs is Google's open-source front-end JS framework. With Angularjs, we can easily and robustly develop a single-page Web application similar to Gmail. Angularjs This emerging MVC front-end framework has the following features: MVC, modularity, automated bidirectional data binding, semantic tagging, dependency injection, and more.

What is the difference between angular and jquery?

The main purpose of jquery is to simplify JS writing, focusing on cross-platform browsers, primarily for manipulating the DOM.
ANGULARJS focuses on the acquisition and presentation of HTML data, as well as the need to address increasingly complex web applications, making it easier to develop large web applications.

In fact, ANGUARJS provides some semantic tags (directive) that are enhanced for HTML, which are executed when the browser finishes loading the page. For example:

<table id= "Leaderboard" >          <thead>              <tr>                  <th>Id</th>                  <th>name </th>                  <th>Salary</th>              </tr>          </thead>          <tbody>              <tr ng-repeat= "User in Users" >                  <td>{{user. Id}}</td>                  <td>{{user. Name}}</td>                  <td>{{user. salary}}</td>              </tr>          </tbody></table>

The ng-repeat above is a directive, which is equivalent to a for loop. After the page is loaded, ANGULARJS will traverse the users data object to render (render) the contents of the table.

How to implement the JS script after render is complete

When we use jquery in conjunction with ANGULRAJS, we want to execute a JS script after render table, and apply the jqtable to the table. In the actual development, will often encounter such a demand, want to be able to capture the Angularjs render finished page event.
To achieve this, we need to customize the directive for the current app:

App.directive (' Onfinishrenderfilters ', function ($timeout) {    return {        restrict: ' A ',        link:function ( Scope, element, attr) {            if (scope. $last = = = True) {                $timeout (function () {                    scope. $emit (' ngrepeatfinished ');                });            }        }    };});

Then, in the place where we need to monitor, add the directive:

<TR ng-repeat= "User in Users" on-finish-render-filters>      <td>{{user. Id}}</td>      <td>{{user. Name}}</td>      <td>{{user. Salary}}</td></tr>

Finally, add the JS script that we need to render after completion:

$scope. $on (' ngrepeatfinished ', function (ngrepeatfinishedevent) {          //below is the JS          var table = $ (which executes after table render is completed) "#leaderBoard"). DataTable ({              bjqueryui:true,              "sscrollx": ' 100% ',          });});

How to monitor dom rendering in angular