Angularjs, how to execute the JS script after render is complete

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 Angularjs 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.

Angularjs How the page is rendered

ANGUARJS provides some semantic tags for HTML enhancement (Directive), which are executed when the browser finishes loading the page. For example:

<TableID= "Leaderboard">          <thead>              <TR>                  <th>Id</th>                  <th>Name</th>                  <th>Salary</th>              </TR>          </thead>          <tbody>              <TRng-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:

function ($timeout) {    return  {        ' A ',        function(scope, element, attr)            {Iftrue) {                $timeout (function() {                    Scope. $emit (' ngrepeatfinished '),});}};}    );

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

<TRng-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:

function (ngrepeatfinishedevent) {          // below is the JS var table = $ ("#") executed after table render is completed           Leaderboard "). DataTable ({              true,              " sscrollx ": ' 100% ',          });});

Angularjs, how to execute the JS script after render is complete