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