快捷導(dǎo)航

AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法

更新時(shí)間：2017年05月18日 11:51:03 作者：timelessmemoryli

這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS自定義指令實(shí)現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS自定義指令之復(fù)制指令實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
    <script src="jquery.min.js"></script>
    <script src="angular.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
      var app = angular.module('myapp', []);
      app.directive('duplicate', function($rootScope){
       return {
        transclude: 'element',
        replace: true,
        priority: 2,
        link: function(scope, elem, attrs, ctrl, transclude) {
         var times = parseInt(attrs.duplicate);
         var previous = elem;
         var childScope;
         for(var i = 0; i < times; i++) {
          childScope = scope.$new();//新建scope的子scope
          childScope.number = i;
          transclude(childScope, function(clone){//transclude將每個(gè)childScope與clone關(guān)聯(lián)， 一一對(duì)應(yīng)(一對(duì)對(duì))
            // console.log(childScope.$id);
            // console.log(clone.scope().$id)
            previous.after(clone);//在previous與clone拼接再賦值給clone
            previous = clone;
          });
         }
          console.log(scope.childHead.number);//可以看到5個(gè)全是scope的子scopeconsole.log(scope.childTail.number);
          console.log(scope == $rootScope)//可以看到此時(shí)指令scope就是$rootScope 因?yàn)閟cope:false
        },
       }
      });
    </script>
  </head>
  <body ng-app="myapp">
    <input type='text' ng-model='number' duplicate="5" />
    <br/>
    <!--與上面綁定 -->
    <input type="text" ng-model="childHead.number"/><br/><inputtype="text"ng−model="childTail.number" />
  </body>
</html>

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解Angular16如何獲取路由參數(shù)
這篇文章主要為大家介紹了Angular16如何獲得路由參數(shù)的實(shí)現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
使用AngularJS 應(yīng)用訪問 Android 手機(jī)的圖片庫(kù)
這篇文章主要介紹了使用AngularJS 應(yīng)用訪問 Android 手機(jī)的圖片庫(kù)的相關(guān)資料,需要的朋友可以參考下
2015-03-03
從源碼看angular/material2 中 dialog模塊的實(shí)現(xiàn)方法
這篇文章主要介紹了從源碼看angular/material2 中 dialog模塊的實(shí)現(xiàn)方法,需要的朋友可以參考下
2017-10-10
Angularjs中的驗(yàn)證input輸入框只能輸入數(shù)字和小數(shù)點(diǎn)的寫法（推薦）
這篇文章主要介紹了Angularjs中的驗(yàn)證input輸入框只能輸入數(shù)字和小數(shù)點(diǎn)的寫法,需要的朋友可以參考下
2017-08-08
Angular(5.2->6.1)升級(jí)小結(jié)
今天小編就為大家分享一篇關(guān)于Angular(5.2->6.1)升級(jí)小結(jié)，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2018-12-12
Angular.JS去掉訪問路徑URL中的#號(hào)詳解
最近天天都在用AngularJS，各類文檔也都看過好幾遍，但總是些編程上的事找不到優(yōu)雅的解決辦法。今天終于把AngularJS的項(xiàng)目訪問路徑URL里的#號(hào)去掉了，這個(gè)問題不見得有多難，關(guān)鍵是花多長(zhǎng)時(shí)間去理解AngularJS框架本身，下面來看看詳細(xì)介紹，需要的朋友可以參考下。
2017-03-03
AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法
這篇文章主要介紹了AngularJS監(jiān)聽ng-repeat渲染完成的兩種方法,結(jié)合實(shí)例形式分析了AngularJS基于自定義指令及廣播事件實(shí)現(xiàn)監(jiān)聽功能的相關(guān)操作技巧,需要的朋友可以參考下
2018-01-01
Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法
今天小編就為大家分享一篇Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
AngularJS入門教程之多視圖切換用法示例
這篇文章主要介紹了AngularJS多視圖切換用法,結(jié)合實(shí)例形式分析了AngularJS基于多視圖切換實(shí)現(xiàn)碎片文件動(dòng)態(tài)載入的相關(guān)操作技巧,需要的朋友可以參考下
2016-11-11
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧
2017-07-07