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

AngularJs自定义指令详解（4） - transclude

2017-07-13 15:40 375 查看

transclude默认值为false，如果设置 transclude为true，那么相应地，必须在模板代码中加入ng-transclude指令。

先看个例子：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">

angular.module('app',[])
.directive('myDirective',function(){
return{
template:'<div>\
<h2>大标题</h2>\
</div>'
};
});
</script>
</head>
<body ng-app="app">
<div my-directive >
    <ul>
<li>小标题1</li>
<li>小标题2</li>
</ul>
</div>
</body>
</html>

输出：

大标题

见鬼！小标题全不见了！审查元素看看：

魂淡，全丢没了！

没办法，出动transclude！看代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">

angular.module('app',[])
.directive('myDirective',function(){
return{
template:'<div>\
<h2>大标题</h2>\
<span ng-transclude></span>\
</div>',
 transclude:true
};
});
</script>
</head>
<body ng-app="app">
<div my-directive >
<ul>
<li>小标题1</li>
<li>小标题2</li>
</ul>
</div>
</body>
</html>

输出：

大标题

小标题1

小标题2

审查元素看看：

再看看这个指令嵌套的例子：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">

angular.module('app',[])
.directive('myDirective',function(){
return{
restrict:'E',
template:'<div>\
<h2>大标题</h2>\
<span ng-transclude></span>\
</div>',
 transclude:true
};
})
.directive('myDirective2',function(){
return{
restrict:'E',
template:'<div>\
<h3>中标题</h3>\
<span ng-transclude></span>\
</div>',
transclude:true
};
});
</script>
</head>
<body ng-app="app">
<my-directive>
<my-directive2>
<ul>
<li>小标题1</li>
<li>小标题2</li>
</ul>
    </my-directive2>
</my-directive>
</body>
</html>

输出:

大标题

中标题

小标题1

小标题2

可以尝试把指令里的transclude:true去掉，输出肯定有问题，所以两个指令里的transclude:true都是必需的。

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

标签：

相关文章推荐

新的分享

章节导航