angularJS 指令封装回到顶部

关于angularJS如何回到顶部，还是直接code吧！

1.构建指令，使用registerDirective构建指令添加到内部的hasDirectives对象内，以方便后面在全局查找指令的时候进行匹配。

[javascript] view plain copy

1. /** 
2. **回到顶部 
3. **/  
4.   
5. define(["app"], function (app) {  
6.       
7.     app().registerDirective("backToTop", function () {  
8.         return {  
9.             restrict: "E",  
10.             link: function (scope, element, attr) {  
11.                 var e = $(element);  
12.                 $(window).scroll(function () {                 //滚动时触发  
13.                     if ($(document).scrollTop() > 300)         //获取滚动条到顶部的垂直高度,到相对顶部300px高度显示  
14.                         e.fadeIn(300)  
15.                     else  
16.                         e.fadeOut(200);  
17.                 });  
18.                 /*点击回到顶部*/  
19.                 e.click(function () {  
20.                     $('html, body').animate({                 //添加animate动画效果  
21.                         scrollTop: 0  
22.                     }, 500);  
23.                 });  
24.             }  
25.         };  
26.     });  
27. });  

注：

registerDirective 是$CompileProvider的方法，主要就是把内建指令添加到内部的hasDirectives对象内，以方便后面在全局查找指令的时候进行匹配。

指令从html的角度，可以认为指令名字是一个标识符，可以作为元素名（E），元素属性（A）,注释（M），类名（C）出现在html中；而从javaScript的角度，则可以认为是返回的一个规范化的有特殊意义的指令对象。

link函数创建可以操作dom的指令，签名如下：

[javascript] view plain copy

1. link:function(scope,element,attrs){  
2.   
3. };  

scope     在其内部作用域注册监听器的作用域。

element    代表实例元素,指使用此指令的元素。在postLink函数中我们应该只操作此 元素的子元素,因为子元素已经被链接过了。 

attrs     代表实例属性,是一个由定义在元素上的属性组成的标准化列表,可以在所有指 令的链接函数间共享。会以JavaScript对象的形式进行传递。 2. 将定义的 backToTop 指令对象在页面调用。

2.在页面调用backToTop指令

[javascript] view plain copy

1. <back-to-top class="back_top" title="返回顶部"><i class="fa fa-angle-up"></i></back-to-top>  

注：

restrict - EACM的子集的字符串，它限制directive为指定的声明方式。如果省略的话，directive将仅仅允许通过属性声明：

E - 元素名称： <back-to-top></back-to-top>

A - 属性名： <div back-to-top</div>

C - class名： <div class=”back-to-top”></div>

M - 注释 ： <!-- back-to-top -->