AngularJS自定義指令之復(fù)制指令實現(xiàn)方法
更新時間：2017年05月18日 11:51:03 作者：timelessmemoryli
這篇文章主要介紹了AngularJS自定義指令之復(fù)制指令實現(xiàn)方法,結(jié)合完整實例形式分析了AngularJS自定義指令實現(xiàn)復(fù)制功能的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了AngularJS自定義指令之復(fù)制指令實現(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將每個childScope與clone關(guān)聯(lián)， 一一對應(yīng)(一對對)
// console.log(childScope.$id);
// console.log(clone.scope().$id)
previous.after(clone);//在previous與clone拼接再賦值給clone
previous = clone;
});
}
console.log(scope.childHead.number);//可以看到5個全是scope的子scopeconsole.log(scope.childTail.number);
console.log(scope == $rootScope)//可以看到此時指令scope就是$rootScope 因為scope: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入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
您可能感興趣的文章:
- 深入講解AngularJS中的自定義指令的使用
- AngularJS創(chuàng)建自定義指令的方法詳解
- AngularJS優(yōu)雅的自定義指令
- AngularJS使用自定義指令替代ng-repeat的方法
- AngularJS 自定義指令詳解及實例代碼
- AngularJS自定義指令實現(xiàn)面包屑功能完整實例
- AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
- AngularJS 自定義指令詳解及示例代碼
- AngularJS自定義指令詳解（有分頁插件代碼）
- 詳解angularJS自定義指令間的相互交互
- AngularJS實現(xiàn)自定義指令及指令配置項的方法
相關(guān)文章
這篇文章主要介紹了AngularJS手動表單驗證的相關(guān)資料，AngularJS的表單驗證大致有兩種，一種是手動驗證，一種是自動驗證，本文重點介紹AngularJS手動表單驗證，感興趣的小伙伴們可以參考一下2016-02-02
AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié)
AngularJS 是一組用于創(chuàng)建單頁Web應(yīng)用的豐富框架，給構(gòu)建豐富交互地應(yīng)用帶來了所有功能，其中一項主要的特性是Angular對動畫的支持。下面通過本文給大家介紹AngularJS中實現(xiàn)顯示或隱藏動畫效果的方式總結(jié)，對angularjs動畫效果相關(guān)知識感興趣的朋友一起學(xué)習(xí)2015-12-12
AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴展、增強HTML功能,它專為構(gòu)建強大的WEB應(yīng)用而設(shè)計。下面這篇文章我們來分享如何利用Angularjs實現(xiàn)幻燈片效果。2016-09-09
AngularJs最重要也是最難理解的模塊之一就是它的指令（directive）了，自定義指令配置有很多個參數(shù)，下面這篇文章主要介紹了關(guān)于Angular.js指令中scope類型的幾種特殊情況，需要的朋友可以參考下。2017-02-02
完美解決UI-Grid表格元素中多個空格顯示為一個空格的問題
下面小編就為大家?guī)硪黄昝澜鉀QUI-Grid表格元素中多個空格顯示為一個空格的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了Angular 容器部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
本文主要給大家介紹基于AngularJS實現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能，通過第三方控件來實現(xiàn)，感興趣的朋友跟著小編一起看看具體實現(xiàn)代碼吧2015-10-10
這篇文章主要為大家介紹了詳解如何在Angular中引入Mock.js實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
本文通過實例代碼給大家介紹了angularjs $parse的相關(guān)知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了Angular ng-class的知識，并整理了相關(guān)資料，有興趣的小伙伴可以參考下2016-09-09