AngularJs自定义指令详解（4） - transclude

最新推荐文章于 2021-03-03 21:36:35 发布

weixin_30284355

最新推荐文章于 2021-03-03 21:36:35 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/minghui007/p/7160861.html

版权

transclude默认值为false，如果设置 transclude为true，那么相应地，必须在模板代码中加入ng-transclude指令。

先看个例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../lib/angular-1.3.16/angular.min.js"></script>
    <script src=""></script>
    <title></title>
    <script language="JavaScript">

        angular.module('app',[])
                .directive('myDirective',function(){
                    return{
                        template:'<div>\
                                    <h2>大标题</h2>\
                                </div>'
                    };
                });
    </script>
</head>
<body ng-app="app">
<div my-directive >
    <ul>
        <li>小标题1</li>
        <li>小标题2</li>
    </ul>
</div>
</body>
</html>

输出：

大标题

见鬼！小标题全不见了！审查元素看看：

魂淡，全丢没了！

没办法，出动transclude！看代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../lib/angular-1.3.16/angular.min.js"></script>
    <script src=""></script>
    <title></title>
    <script language="JavaScript">

        angular.module('app',[])
                .directive('myDirective',function(){
                    return{
                        template:'<div>\
                                    <h2>大标题</h2>\
                                        <span ng-transclude></span>\
                                </div>',
                        transclude:true
                    };
                });
    </script>
</head>
<body ng-app="app">
<div my-directive >
    <ul>
        <li>小标题1</li>
        <li>小标题2</li>
    </ul>
</div>
</body>
</html>

输出：

大标题

小标题1
小标题2

审查元素看看：

再看看这个指令嵌套的例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../lib/angular-1.3.16/angular.min.js"></script>
    <script src=""></script>
    <title></title>
    <script language="JavaScript">

        angular.module('app',[])
                .directive('myDirective',function(){
                    return{
                        restrict:'E',
                        template:'<div>\
                                    <h2>大标题</h2>\
                                        <span ng-transclude></span>\
                                </div>',
                        transclude:true
                    };
                })
                .directive('myDirective2',function(){
                    return{
                        restrict:'E',
                        template:'<div>\
                                    <h3>中标题</h3>\
                                        <span ng-transclude></span>\
                                </div>',
                        transclude:true
                    };
                });
    </script>
</head>
<body ng-app="app">
<my-directive>
    <my-directive2>
        <ul>
            <li>小标题1</li>
            <li>小标题2</li>
        </ul>
    </my-directive2>
</my-directive>
</body>
</html>

输出: