AngularJs指令

時間 2019-12-08

原文原文鏈接

http://www.cnblogs.com/rohelm/p/4051437.htmlhtml

http://blog.csdn.net/kongjiea/article/details/49840035app

transclude 的效果

代碼：ide

<!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>

效果：spa

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。