AngularJs 指令directive之transclude
transclude - 编译元素的内容,使它能够被directive所用。需要(在模版中)配合ngTransclude使用(引用)
先看例子,index.JS代码:
var appModule = angular.module('app', []);
appModule.directive('hello', function() {
return {
restrict: 'E',
template: '<div>Hi there <span ng-transclude></span></div>',
transclude: true
};
});html
<html ng-app='app'>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<hello>
<br/>
<span>原始的内容,</span><br/>
<span>还会在这里。</span>
</hello>
<hello>
</hello>
</body>
<script type="text/javascript" src="../vendor/angular/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</html> 运行结果
firebug再看页面代码变成了
<hello>
<div>Hi there
<span ng-transclude="">
<br/>
<span>原始的内容,</span><br/>
<span>还会在这里。</span>
</span>
</div>
</hello>
<hello <div="">Hi there
<span ng-transclude="">
</span>
</hello> 相关推荐
xingdongfang 2019-11-10
youyouzouzou 2014-05-30
zbwroom 2014-05-30
老卫的技术站 2018-10-09
Oranq 2017-03-22
LDN0 2014-07-02
CrazyDogWang 2017-09-10
zbwroom 2017-09-10
lujingjing 2019-06-28
CrazyDogWang 2016-06-07
lizean 2016-05-20
zhenghao 2016-05-17
youyouzouzou 2016-05-11
zbwroom 2014-05-30
zhenghao 2014-05-30
lizean 2014-05-30
Cricket 2019-06-26
lizean 2013-12-20