AngularJs指令

最新推荐文章于 2024-08-01 10:07:32 发布

ahhawox560566

最新推荐文章于 2024-08-01 10:07:32 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wj033/p/6823864.html

版权

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>

转载于:https://www.cnblogs.com/wj033/p/6823864.html

ahhawox560566

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs指令

http://www.cnblogs.com/rohelm/p/4051437.htmlhttp://blog.csdn.net/kongjiea/article/details/49840035transclude 的效果代码：<!DOCTYPE html><html lang="zh-cn"><head><script src=...
复制链接

扫一扫