快捷導(dǎo)航

angularJS 指令封裝回到頂部示例詳解

更新時間：2017年01月22日 14:46:12 作者：Joker_Ye

本篇文章主要介紹了angularJS 指令封裝回到頂部示例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

關(guān)于angularJS如何回到頂部，還是直接code吧！

1.構(gòu)建指令，使用registerDirective構(gòu)建指令添加到內(nèi)部的hasDirectives對象內(nèi)，以方便后面在全局查找指令的時候進行匹配。

/** 
**回到頂部 
**/ 
 
define(["app"], function (app) { 
   
  app().registerDirective("backToTop", function () { 
    return { 
      restrict: "E", 
      link: function (scope, element, attr) { 
        var e = $(element); 
        $(window).scroll(function () {         //滾動時觸發(fā) 
          if ($(document).scrollTop() > 300)     //獲取滾動條到頂部的垂直高度,到相對頂部300px高度顯示 
            e.fadeIn(300) 
          else 
            e.fadeOut(200); 
        }); 
        /*點擊回到頂部*/ 
        e.click(function () { 
          $('html, body').animate({         //添加animate動畫效果 
            scrollTop: 0 
          }, 500); 
        }); 
      } 
    }; 
  }); 
});

注：

registerDirective 是$CompileProvider的方法，主要就是把內(nèi)建指令添加到內(nèi)部的hasDirectives對象內(nèi)，以方便后面在全局查找指令的時候進行匹配。

指令從html的角度，可以認為指令名字是一個標識符，可以作為元素名（E），元素屬性（A）,注釋（M），類名（C）出現(xiàn)在html中；而從JavaScript的角度，則可以認為是返回的一個規(guī)范化的有特殊意義的指令對象。

link函數(shù)創(chuàng)建可以操作dom的指令，簽名如下：

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

scope在其內(nèi)部作用域注冊監(jiān)聽器的作用域。

element代表實例元素,指使用此指令的元素。在postLink函數(shù)中我們應(yīng)該只操作此元素的子元素,因為子元素已經(jīng)被鏈接過了。

attrs 代表實例屬性,是一個由定義在元素上的屬性組成的標準化列表,可以在所有指令的鏈接函數(shù)間共享。會以JavaScript對象的形式進行傳遞。 2. 將定義的 backToTop 指令對象在頁面調(diào)用。

2.在頁面調(diào)用backToTop指令

<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 - 注釋：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angularJS 指令封裝回到頂部示例詳解

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具