AngularJS Directive指令中transclude属性

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

原创最新推荐文章于 2021-03-03 21:36:35 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJs #directive #transclude

前端专栏收录该内容

22 篇文章

订阅专栏

定义指令对象时，可以不添加transclude属性，如果添加该属性，那么它的属性值是布尔类型的，默认值为false，表示不开启属性，如果设置为true值时，则开启了该属性；当开启了transclude属性后，就可以在模板中通过ng-transclude方式替换指令元素中的内容。假如指令元素中的内容如下

<div>hello!</div>

指令模板中的内容代码如下

<h3>I am template</h3>

指令元素中，调用ng-transclude指令后，原有指令元素中的内容则变成如下形式。

<div ng-transclude>hello!<h3>I am template</h3></div>

在添加transclude属性并开启成功后，可以将调用指令后的元素内容替换为指令中的模板内.
如果模板中的内容没有元素标签，而是纯文本内容，那么，在替换时，则会自动添加一个<span>标签，不仅仅是内容的替换，还可以通过变量来传递数据。

如下示例：设置指令对象中的transclude属性

功能描述
在自定义指令的模板中，添加一个文本输入框，并通过ng-model绑定名为“text”的变量。另外，再添加一个<div>元素，并添加ng-transclude属性，通过该属性替换<div>元素的内容
代码如下：

<!DOCTYPE html>
<html ng-app="a8_3">
<head>
    <title>设置指令对象中的transclude属性</title>
    <script src="/node_modules/angular/angular.min.js"></script>
    <style type="text/css">
        .frame {
            padding: 2px 8px;
            margin: 0px;
            font-size: 12px;
            width: 320px;
            background-color: #eee;
        }

        .tip {
            font-size: 9px;
            color: #666;
            margin: 3px 5px;
        }
    </style>
    <script type="text/ng-template" id="tpl">
        <div class="frame">
            <input type="text" ng-model="text" />
            <div ng-transclude class="tip"></div>
        </div>
    </script>
</head>
<body>
    <ts-tplscipt>{{text}}</ts-tplscipt>   
    <script type="text/javascript">
        var app = angular.module('a8_3', [])   
        .directive('tsTplscipt', function () {
            return {
                restrict: 'EAC',
                templateUrl: 'tpl',
                transclude: true
            };
        });
    </script>
</body>
</html>

程序运行如下
源码分析
定义了一个名为“tsTplscipt”的指令。添加“transclude”属性，并将它的值设置为true，表示开启该属性的功能。
然后，在指令对应模板的元素中，通过添加“ng-transclude”属性的方式，调用“transclude”属性的功能，，该元素中的内容将会被指令元素原有内容所替代，效果见上图。
TIP:
指令中使用“transclude”属性的作用是为了保留指令元素中原有的内容。在通常情况下，使用自定义的指令元素后，原有内容都被指令中的模板替换，因此，为了保留这部分内容，引入了“transclude”属性，通过在模板中给元素添加“ng-transclude”属性，就可以获取指令元素中原有的内容。