搞

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

 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>

输出:

大标题

中标题

  • 小标题1
  • 小标题2

可以尝试把指令里的transclude:true去掉，输出肯定有问题，所以两个指令里的transclude:true都是必需的。

 

posted on 2015-07-03 17:22  开发手游啦啦啦  阅读(689)  评论(0)  编辑  收藏  举报

导航