99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章主要介紹angularJS如何實(shí)現(xiàn)指令封裝回到頂部，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是專業(yè)的松桃網(wǎng)站建設(shè)公司，松桃接單;提供成都網(wǎng)站制作、做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行松桃網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

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

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

注：

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

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

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

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

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

element代表實(shí)例元素,指使用此指令的元素。在postLink函數(shù)中我們應(yīng)該只操作此 元素的子元素,因?yàn)樽釉匾呀?jīng)被鏈接過了。

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

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

注：

restrict - EACM的子集的字符串，它限制directive為指定的聲明方式。如果省略的話，directive將僅僅允許通過屬性聲明：

E - 元素名稱：

A - 屬性名：