AngularJS command encapsulation Back to Top example details, angularjs Back to Top

AngularJS command encapsulation Back to Top example details, angularjs Back to Top

For more information about how angularJS returns to the top, click code!

1. Build commands,Use registerDirective to build commands and add them to the internal hasdireves ves object to facilitate matching during global query of commands.

/***** Return to the top **/define (["app"], function (app) {app (). registerDirective ("backToTop", function () {return {restrict: "E", link: function (scope, element, attr) {var e = $ (element ); $ (window ). scroll (function () {// trigger if ($ (document) When scrolling ). scrollTop ()> 300) // obtain the vertical height from the scroll bar to the top and PX from the top. e. fadeIn (300) else e. fadeOut (200) ;});/* click back to the top */e. click (function () {$ ('html, body '). animate ({// Add the animation effect scrollTop: 0}, 500 );});}};});});

Note:

RegisterDirective is the $ CompileProvider method. It is mainly used to add built-in commands to the internal hasDirectives object to facilitate matching during global query of commands.

From the perspective of html, the command name can be considered as an identifier, which can be used as the element name (E), element attribute (A), annotation (M), and Class Name (C) it appears in html. From the JavaScript perspective, it can be considered as a normalized directive object with special significance.

The link function creates instructions that can operate on the dom. The signature is as follows:

link:function(scope,element,attrs){}; 

Scope registers the listener scope in its internal scope.

Element indicates the instance element, which is the element that uses this command. In the postLink function, we should only operate on the child element of this element, because the child element has been linked.

Attrs stands for instance attributes. It is a standardized list composed of attributes defined on elements. It can be shared among all the linked functions of the specified order. It is passed as a JavaScript Object. 2. Call the defined backToTop command object on the page.

2. Call the backToTop command on the page

<Back-to-top class = "back_top" title = "back to top"> <I class = "fa-angle-up"> </I> </back- -top>

Note:

String Of the subset of restrict-EACM, which limits direve ve to the specified declaration method. If omitted, directive will only allow the attribute declaration:

E-element name: <back-to-top> </back-to-top>

A-attribute name: <div back-to-top </div>

C-class name: <div class = "back-to-top"> </div>

M-Note: <! -- Back-to-top -->

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.