最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

有多個(gè)模板時(shí)，我們可以將所有的模板集中在一個(gè)文件中，只需加載一次，然后根據(jù)id的不同調(diào)用不同的模板。

2.transclude

定義是否將當(dāng)前元素(html頁(yè)面的自定義指令)的內(nèi)容轉(zhuǎn)移到模板中。
模板中要接收當(dāng)前元素內(nèi)容的標(biāo)簽需要使用ng-transclude指令。

 
  
  自定義指定令內(nèi)容

  
  
   
 模板內(nèi)容
   //模板接收上面自定義指令間的內(nèi)容
  
 

 

3.什么是scope的父作用域

引用自定義指令的html頁(yè)面的控制器所能控制的范圍。下面代碼的父作用域就是myController所控制的范圍

4.scope屬性的值是對(duì)象(object)時(shí)的用法

AngularJS內(nèi)置指令的用法：ng-model=”obj”，通過(guò)obj這個(gè)變量雙向綁定值，controller里變了，html頁(yè)面也跟著變化。這說(shuō)明，內(nèi)置指令不僅可作為屬性，還可動(dòng)態(tài)改變值，這個(gè)要是不懂的，看看基礎(chǔ)語(yǔ)法。如下代碼：

 要?jiǎng)討B(tài)變化的內(nèi)容: 

自定義指令當(dāng)然也需要實(shí)現(xiàn)這種功能啦。scope屬性為對(duì)象時(shí)，可為自定義指令指定一個(gè)可以綁定值的屬性。這里還得說(shuō)明一下的是，這個(gè)scope屬性與自定義指令里link屬性里的scope參數(shù)是一個(gè)變量。

有了前面的一個(gè)示例，下面再來(lái)說(shuō)說(shuō)綁定策略：即用符號(hào)前綴給自定義指令傳值。它是一個(gè)鍵值對(duì)，鍵是在自定義指令中使用的，值里符號(hào)后面的字符串是html頁(yè)面自定義指令的屬性名；如果值里只有符號(hào)，則html頁(yè)面自定義指令的屬性名就是鍵名。

其余兩種符號(hào)用法：

 
  
  自定義指定令的內(nèi)容555
 

 

5.controller屬性

controller屬性用于提供對(duì)外的接口，即該自定義指令會(huì)被其他自定義指令調(diào)用。所謂的接口，就是this后的變量或方法。

controller可以使用的參數(shù)，作用域、節(jié)點(diǎn)、節(jié)點(diǎn)的屬性、節(jié)點(diǎn)內(nèi)容的遷移，這些都可以通過(guò)依賴注入被傳進(jìn)來(lái)，所以你可以根據(jù)需要只寫(xiě)要用的參數(shù)，有$scope,Z$element, $attrs, $transclude。

調(diào)用該自定義指令的指令需要放在該指令之間。假定firstDirective指令是要被調(diào)用的自定義指令，expander是調(diào)用者指令。如下：

  {{item.title}}:{{item.text}}
 

既然firstDirective內(nèi)部還有指令，則firstDirective必須配置transclude屬性為true。代碼如下：

//用于被調(diào)用的自定義指令
 app.directive('firstDirective',function(){
  return {
   template : '',
   replace : true,
   transclude : true,
   controller :function(){
    this.getData = function(val){
      var data = 3 * val;
     return data;
    }
    this.a = "abc";
   }
  }
 });

調(diào)用其他指令的自定義指令必須配置require屬性指定指令名。然后在link函數(shù)里就可注入要調(diào)用的指令。

//自定義指令
 app.directive('expander',function(){
  return {
   templateUrl : 'template.html',
   replace : true,
   transclude : true,
   require : '^?firstDirective',//引用其他自定義指令，^表示從父節(jié)點(diǎn)開(kāi)始找，?表示將告訴$compile服務(wù)，如果所需的指令沒(méi)找到，不要拋出異常
   scope : {
    title : '=attribute'
   },
   link : function(scope,element,attris,firstDirct){//注入
    console.log(firstDirct.a)//調(diào)用其他指令的變量
    console.log(firstDirct.getData(6)) //調(diào)用其他指令的方法    
   }
  };
 });

6.link屬性用法

link后的方法在指令中負(fù)責(zé)執(zhí)行DOM 操作和注冊(cè)事件監(jiān)聽(tīng)器等。link函數(shù)有五個(gè)參數(shù)(scope,element,attrs,controller,linker)。link 方法的參數(shù)解釋：

scope:它與自定義指令里的scope屬性是一個(gè)東西。它是指令scope的引用，所以可改名為sco等其他名字。scope 變量在初始化時(shí)是不被定義的，link 方法會(huì)注冊(cè)監(jiān)視器監(jiān)視值變化事件。

element:包含指令的DOM元素的引用， link 方法一般通過(guò)jQuery 操作實(shí)例（如果沒(méi)有加載jquery，還可以使用Angular's jqLite ）。

controller:在有嵌套指令的情況下使用。這個(gè)參數(shù)作用在于把子指令的引用提供給父指令，允許指令之間進(jìn)行交互，如前面的例子。

注意：當(dāng)調(diào)用link 方法時(shí)， 通過(guò)值傳遞（”@”）的scope 變量將不會(huì)被初始化，它們將會(huì)在指令的生命周期中另一個(gè)時(shí)間點(diǎn)進(jìn)行初始化，如果你需要監(jiān)聽(tīng)這個(gè)事件，可以使用scope.$watch 方法。

7.link與compile的區(qū)別

compile函數(shù)有三個(gè)參數(shù)(cElement,cAttrs,cLinker)，使用compile函數(shù)可以在ng創(chuàng)建原始dom實(shí)例以及創(chuàng)建scope實(shí)例之前，改變?cè)嫉膁om(template element)；可以應(yīng)用于當(dāng)需要生成多個(gè)element實(shí)例但只有一個(gè)template element的情況，ng-repeat就是一個(gè)最好的例子。它就在是compile函數(shù)階段改變?cè)嫉膁om生成多個(gè)原始dom節(jié)點(diǎn)，然后每個(gè)又生成element實(shí)例。因?yàn)閏ompile只會(huì)運(yùn)行一次,所以當(dāng)你需要生成多個(gè)element實(shí)例的時(shí)候是可以提高性能的。

link函數(shù)有五個(gè)參數(shù)(scope,element,attrs,ctrl,linker)。

link又分為pre-link和post-link，在代碼里直接用pre和post表示，當(dāng)我們直接使用link時(shí)，默認(rèn)跟post一樣。我在網(wǎng)上找了個(gè)例子來(lái)說(shuō)明一下區(qū)別，代碼如下：

 
  
   
     Hello 
   
  
 
 

注意打印結(jié)果：

levelOne: compile => 
  
   
    Hello 
   
  
 levelTwo: compile => 
   
    Hello 
   
 levelThree: compile => 
    Hello 
 levelOne: pre link => 
  
   
    Hello 
   
  

levelTwo: pre link => 
   
    Hello 
   

levelThree: pre link => 
    Hello 

levelThree: post link => 
    Hello 
levelTwo: post link => 
   
    Hello 
   

levelOne: post link => 
  
   
    Hello 
   
  

分析打印結(jié)果：

運(yùn)行l(wèi)evelone指令中的compile函數(shù)，ng就會(huì)遞歸遍歷它的dom節(jié)點(diǎn)，然后在level-two與level-three上面重復(fù)這些操作。所以會(huì)依次打印連續(xù)三個(gè)compile。

pre會(huì)在所有compile執(zhí)行完后且在所有post之前執(zhí)行。這樣可以在執(zhí)行post前執(zhí)行一些其他代碼，有些類似AOP。

由上面結(jié)果可知，post的執(zhí)行順序卻是先levelthree最后levelone，即反向調(diào)用相關(guān)聯(lián)的post-link函數(shù)。這么做的好處是，當(dāng)我們運(yùn)行l(wèi)evelone時(shí)，保證leveltwo與levelthree都已經(jīng)執(zhí)行過(guò)了，這樣就會(huì)更安全。所以默認(rèn)的link就是post。

一個(gè)我做過(guò)的分頁(yè)例子

之所以展示這個(gè)代碼，主要是給一些朋友看看真實(shí)的項(xiàng)目，，多余的東西刪掉了，具體的注入這里就不在講了。

html頁(yè)面代碼：

控制器代碼：

"use strict";//嚴(yán)格

define(["application-configuration", "s-pagination", "tableDataService"], function (app) {
 app.register.controller("AppStatisticController", ["$scope", "$rootScope", "$stateParams","$http", "tableDataService",
  function($scope, $rootScope, $stateParams, $http, tableDataService) {  

   var getTableDataSuccess = function(result) {
    if(result.c == 1) {
     $scope.title = result.title;
     $scope.lists = result.pageList;
     $scope.total = result.data;
     $scope.paginationConf.totalItems = result.total;
    }else if(result.c == 2){
     //彈出框，沒(méi)有查到數(shù)據(jù) 
    } else {
     alert(result.i);
    }
   };

   var getTableDataError = function(result) {
    alert(result);
   };
   /*重要的代碼，這個(gè)paginationConf與自定義指令雙向綁定數(shù)據(jù)*/
   $scope.paginationConf = {
    currentPage: 1,
    itemsPerPage: 10,
    pagesLength: 9,
    search: false,
    onChange: function() {
     var param = {
      "pageNo": this.currentPage,
      "pageSize": this.itemsPerPage,
      "timeType": $scope.formData.timeType,
      "adStyle":$scope.formData.adStyle,
     };
     param.appId = $stateParams.appId;
     tableDataService.getTableData(
      param,
      "ims/appStat.do",
      getTableDataSuccess,
      getTableDataError
     );
    }
   };

   $scope.$watch("formData",function(newValue,oldValue, scope) {
    if(newValue.keywords == oldValue.keywords) {
      $scope.paginationConf.search = true;
    }
   }, true);

  }]);
});

自定義指令代碼：也算是angularJS的分頁(yè)插件

/**
 * 分頁(yè)插件封裝s-pagination.js
 * @date 2016-05-06
 * @author Peter
 */

angular.module('s.pagination', []).directive('sPagination',[function(){//自定義指令
 return {
  restrict: 'E',//僅限元素名調(diào)用
  template: '' +
  ' 0">' +
  '«' +
  '' +
  '{{ item }}' +
  '' +
  '»' +
  '' +
  ' 0">' +
  '第頁(yè) ' +
  '每頁(yè)' +
  '/共{{ conf.totalItems }}條' +
  '' +
  '暫無(wú)數(shù)據(jù)' +
  '',
  replace: true,
  scope: {
   conf: '='//雙向綁定數(shù)據(jù)
  },
  link: function(scope, element, attrs){
   // 變更當(dāng)前頁(yè)
   scope.changeCurrentPage = function(item) {
    if(item == '...'){
     return;
    }else{
     scope.conf.currentPage = item;
    }
   };

   // 定義分頁(yè)的長(zhǎng)度必須為奇數(shù) (default:5)
   scope.conf.pagesLength = parseInt(scope.conf.pagesLength) ? parseInt(scope.conf.pagesLength) : 5 ;
   if(scope.conf.pagesLength % 2 === 0){
    // 如果不是奇數(shù)的時(shí)候處理一下
    scope.conf.pagesLength = scope.conf.pagesLength -1;
   }

   // conf.erPageOptions
   if(!scope.conf.perPageOptions){
    scope.conf.perPageOptions = [10, 20, 30, 40, 50];
   }

   // pageList數(shù)組
   function getPagination(newValue, oldValue) {
    //新增屬性search 用于附加搜索條件改變時(shí)觸發(fā)
    if(newValue[1] != oldValue[1] || newValue[2] != oldValue[2]) {
     scope.conf.search = true;
    }
    // conf.currentPage
    scope.conf.currentPage = parseInt(scope.conf.currentPage) ? parseInt(scope.conf.currentPage) : 1;

    // conf.totalItems
    scope.conf.totalItems = parseInt(scope.conf.totalItems) ? parseInt(scope.conf.totalItems) : 0;

    // conf.itemsPerPage (default:15)
    scope.conf.itemsPerPage = parseInt(scope.conf.itemsPerPage) ? parseInt(scope.conf.itemsPerPage) : 15;

    // numberOfPages
    scope.conf.numberOfPages = Math.ceil(scope.conf.totalItems/scope.conf.itemsPerPage);

    // judge currentPage > scope.numberOfPages
    if(scope.conf.currentPage < 1){
     scope.conf.currentPage = 1;
    }

    // 如果分頁(yè)總數(shù)>0，并且當(dāng)前頁(yè)大于分頁(yè)總數(shù)
    if(scope.conf.numberOfPages > 0 && scope.conf.currentPage > scope.conf.numberOfPages){
     scope.conf.currentPage = scope.conf.numberOfPages;
    }

    // jumpPageNum
    scope.jumpPageNum = scope.conf.currentPage;

    // 如果itemsPerPage在不在perPageOptions數(shù)組中，就把itemsPerPage加入這個(gè)數(shù)組中
    var perPageOptionsLength = scope.conf.perPageOptions.length;
    // 定義狀態(tài)
    var perPageOptionsStatus;
    for(var i = 0; i < perPageOptionsLength; i++){
     if(scope.conf.perPageOptions[i] == scope.conf.itemsPerPage){
      perPageOptionsStatus = true;
     }
    }
    // 如果itemsPerPage在不在perPageOptions數(shù)組中，就把itemsPerPage加入這個(gè)數(shù)組中
    if(!perPageOptionsStatus){
     scope.conf.perPageOptions.push(scope.conf.itemsPerPage);
    }

    // 對(duì)選項(xiàng)進(jìn)行sort
    scope.conf.perPageOptions.sort(function(a, b){return a-b});

    scope.pageList = [];
    if(scope.conf.numberOfPages <= scope.conf.pagesLength){
     // 判斷總頁(yè)數(shù)如果小于等于分頁(yè)的長(zhǎng)度，若小于則直接顯示
     for(i =1; i <= scope.conf.numberOfPages; i++){
      scope.pageList.push(i);
     }
    }else{
     // 總頁(yè)數(shù)大于分頁(yè)長(zhǎng)度（此時(shí)分為三種情況：1.左邊沒(méi)有...2.右邊沒(méi)有...3.左右都有...）
     // 計(jì)算中心偏移量
     var offset = (scope.conf.pagesLength - 1)/2;
     if(scope.conf.currentPage <= offset){
      // 左邊沒(méi)有...
      for(i =1; i <= offset +1; i++){
       scope.pageList.push(i);
      }
      scope.pageList.push('...');
      scope.pageList.push(scope.conf.numberOfPages);
     }else if(scope.conf.currentPage > scope.conf.numberOfPages - offset){
      scope.pageList.push(1);
      scope.pageList.push('...');
      for(i = offset + 1; i >= 1; i--){
       scope.pageList.push(scope.conf.numberOfPages - i);
      }
      scope.pageList.push(scope.conf.numberOfPages);
     }else{
      // 最后一種情況，兩邊都有...
      scope.pageList.push(1);
      scope.pageList.push('...');

      for(i = Math.ceil(offset/2) ; i >= 1; i--){
       scope.pageList.push(scope.conf.currentPage - i);
      }
      scope.pageList.push(scope.conf.currentPage);
      for(i = 1; i <= offset/2; i++){
       scope.pageList.push(scope.conf.currentPage + i);
      }

      scope.pageList.push('...');
      scope.pageList.push(scope.conf.numberOfPages);
     }
    }

    if(scope.conf.onChange){
     //請(qǐng)求數(shù)據(jù)
     if(scope.conf.search) {
      scope.conf.onChange();
      scope.conf.search = false;
     }

    }
    scope.$parent.conf = scope.conf;
   }

   // prevPage
   scope.prevPage = function(){
    if(scope.conf.currentPage > 1){
     scope.conf.currentPage -= 1;
    }
   };
   // nextPage
   scope.nextPage = function(){
    if(scope.conf.currentPage < scope.conf.numberOfPages){
     scope.conf.currentPage += 1;
    }
   };

   // 跳轉(zhuǎn)頁(yè)
   scope.jumpToPage = function(){
    scope.jumpPageNum = scope.jumpPageNum.replace(/[^0-9]/g,'');
    if(scope.jumpPageNum !== ''){
     scope.conf.currentPage = scope.jumpPageNum;
    }
   };

   scope.$watch(function() {

    if(!scope.conf.totalItems) {
     scope.conf.totalItems = 0;
    }
    if(angular.isUndefined(scope.conf.search)) {
     scope.conf.search = false;
    }

    var newValue = [scope.conf.totalItems, scope.conf.currentPage, scope.conf.itemsPerPage, scope.conf.search];
    return newValue;
   }, getPagination, true);
  }
 };
}]);

以上是“AngularJS自定義指令的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

快速導(dǎo)航

• 注冊(cè)域名
• 高端品牌網(wǎng)站建設(shè)
• 成都手機(jī)網(wǎng)站建設(shè)
• scgaoxian.com
• 品牌官網(wǎng)設(shè)計(jì)
• 響應(yīng)式網(wǎng)站建設(shè)公司
• 手機(jī)網(wǎng)站制作

友情鏈接

網(wǎng)站制作 網(wǎng)站建設(shè) 網(wǎng)絡(luò)推廣 網(wǎng)站推廣 小程序開(kāi)發(fā) 網(wǎng)站導(dǎo)航

網(wǎng)站建設(shè)

• 四川平武建站
• 網(wǎng)站導(dǎo)航

聯(lián)系方式

• 企業(yè)：四川綿陽(yáng)平武網(wǎng)站建設(shè)工作室
• 地址：成都市青羊區(qū)太升南路288號(hào)
• 電話：18980820575
• 網(wǎng)址：fisionsoft.com.cn

公司名稱：四川綿陽(yáng)平武網(wǎng)站建設(shè)工作室 聯(lián)系電話：18980820575

網(wǎng)站備案號(hào)：蜀ICP備2024061352號(hào)-3

四川平武建站 四川平武網(wǎng)站建設(shè) 四川平武網(wǎng)站設(shè)計(jì) 四川平武網(wǎng)站制作 成都做網(wǎng)站