您的位置：首页 > Web前端 > AngularJS

Angularjs自定义指令之复制指令

2015-12-31 18:04 633 查看

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="bootstrap.min.css">

<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关联，一一对应(一对对)

// console.log(childScope.$id);

// console.log(clone.scope().$id)

previous.after(clone);//在previous与clone拼接再赋值给clone

previous = clone;

});

}

console.log(scope.$$childHead.number);//可以看到5个全是scope的子scope

console.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/>

<input type="text" ng-model="$$childTail.number" />

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航