4.2

最新推荐文章于 2024-08-26 16:28:12 发布

zzb_226

最新推荐文章于 2024-08-26 16:28:12 发布

阅读量332

点赞数

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 src="../angular-1.0.3/angular.min.js"></script>
<script src="Transclude.js"></script>
</html>

对于当前这个例子，transclude的作用可以简化地理解成：把<hello>标签替换成我们所编写的HTML模板，但是<hello>标签内部的内容保持不变。

很显然，由于我们没有加replace:true选项，所以<hello>标签还在，没有被替换掉。同时，通过这个例子你还还会发现一个暗藏的属性，那就是浏览器实际上非常智能，虽然它并不认识<hello>这个标签，但是页面没有出错，它只是默默地把这个标签忽略掉了！怎么样？是不是碉堡了？

你可以自己在上面的JS代码里面加上replace:true，然后再看生成的HTML结构。