AngularJs指令
http://www.cnblogs.com/rohelm/p/4051437.html
http://blog.csdn.net/kongjiea/article/details/49840035
transclude 的效果
代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="angular.min.js"></script>
<meta charset="utf-8">
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div side-box title="TagCloud">
<div class="tagcloud">
<a href="">Graphics</a>
<a href="">ng</a>
<a href="">D3</a>
<a href="">Front-end</a>
<a href="">Startup</a>
</div>
</div>
</div>
<script>
angular.module('myApp', []).controller('myCtrl',function($scope){})
.directive('sideBox', function() {
return {
restrict: 'EA',
scope: {
title: '@'
},
transclude: true,
template: '<div class="sidebox"><div class="content"><h2 class="header">' +
'{{ title }}</h2><span class="content" ng-transclude></span></div></div>'
};
});
</script>
</body>
</html>
效果：
<div ng-controller="myCtrl" class="ng-scope">
<div side-box="" title="TagCloud" class="ng-isolate-scope">
<div class="sidebox">
<div class="content">
<h2 class="header ng-binding">TagCloud</h2>
<span class="content" ng-transclude="">
<div class="tagcloud ng-scope">
<a href="">Graphics</a>
<a href="">ng</a>
<a href="">D3</a>
<a href="">Front-end</a>
<a href="">Startup</a>
</div>
</span>
</div>
</div>
</div>
</div>
