In AngularJs, how to execute the Js script after the render is complete, angularjsrender

In AngularJs, how to execute the Js script after the render is complete, angularjsrender

AngularJs is Google's open-source front-end JS framework. With AngularJs, we can easily and effectively develop single-page Web applications similar to Gmail. AngularJs, an emerging MVC front-end framework, has the following features: MVC, modularization, automatic two-way data binding, semantic tags, dependency injection, and so on.

What is the difference between AngularJs and Jquery?

The main purpose of Jquery is to simplify Js writing and focus on cross-platform browsers. It is mainly used to operate DOM.
AngularJs focuses on the acquisition and presentation of Html data, and responds to increasingly complex Web application requirements, making it easier to develop a large Web application.

How AngularJs presents pages

AnguarJs provides some enhanced semantic tags (directive) for Html, which are executed after the browser loads 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 above ng-repeat 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 content in this table.

How to execute Js scripts after render is complete

When we use Jquery in combination with AngulraJs, we hope to execute a js script after render finishes table and apply JqTable to this table. In actual development, we often encounter such a requirement, hoping to capture the events that AngularJs finishes page rendering.
To achieve this goal, we need to customize direve VE 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, add the directive where we need to monitor:

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

Finally, we need to add the Js script after the render is complete:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
//Here is the JS executed after the table render is completed
var table = $("#leaderBoard").dataTable({
bJQueryUI: true,
"sScrollX": '100%',
};
}; 

 

How to Use angularjs to obtain the focus of a text box

You can write commands.
<! DOCTYPE html>  
Establish an AngularJS Environment

Pay attention to the following key areas,
1. Add ng-app
2. Introduce angularjs.
See angularjs.org/here for details.
<! Doctype html>