angularjs指令：replace与transclude的区别

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

Mars-xq

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

阅读量1.9k

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/56672684

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

将视图模板（Template或TemplateUrl）替换到指定位置的视图（Restrict），
replace:自定义指令名称是否保留。
true：不保留指令名
false：保留指令名（默认）
Transclude：是否将原来视图的内容嵌入到视图模板（Template或TemplateUrl）中。
true：保留替换前的节点内容。
false：直接覆盖原有内容。
ng-tranclude决定了在什么地方放置嵌入部分。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>

<body>
<hello>
    <br/>
    <span>原始的内容，</span><br/>
    <span>还会在这里。</span>
</hello>
<hello></hello>

<br>

<hello1>
    <br/>
    <span>原始的内容1，</span><br/>
    <span>还会在这里1。</span>
</hello1>
<hello1></hello1>
<br>

<hello2>
    <br/>
    <span>原始的内容2，</span><br/>
    <span>还会在这里2。</span>
</hello2>
<hello2></hello2>
<br>

<hello3>
    <br/>
    <span>原始的内容3，</span><br/>
    <span>还会在这里3。</span>
</hello3>
<hello3></hello3>

<br>
<hello4>
    <br/>
    <span>原始的内容4，</span><br/>
    <span>还会在这里4。</span>
</hello4>
<hello4></hello4>

<br>
<hello5>
    <br/>
    <span>原始的内容5，</span><br/>
    <span>还会在这里5。</span>
</hello5>
<hello5></hello5>

<script>
    var appModule = angular.module('app', []);
    appModule
        .directive('hello', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there :transclude: true<span ng-transclude></span></div>',
                transclude: true
                /*把<hello>标签替换成我们所编写的HTML模板，
                但是<hello>标签内部的内容保持不变。*/
            };
        })
        .directive('hello1', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 1 :transclude: false<span ng-transclude></span></div>',
                transclude: false
            };
        })
        .directive('hello2', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 2 :replace: true</div>',
                replace: true/* 将视图模板template替换到指定位置hello2 */
            };
        })
        .directive('hello3', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 3 : replace: false</div>',
                replace: false/*默认为 false*/
            };
        })
        .directive('hello4', function () {
            return {
                restrict: 'E',
                /*ng-tranclude决定了在什么地方放置嵌入部分。*/
                template: '<div>Hi there 4 :replace: true,  transclude: true<span ng-transclude></span></div>',
                replace: true, /*默认为 false*/
                transclude: true
            };
        })
        .directive('hello5', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 5 :replace: false,  transclude: false<span ng-transclude></span></div>',
                replace: false, /*默认为 false*/
                transclude: false
            };
        });
</script>
</body>
</html>

显示结果：

Markdown

分析：

审查元素：

对比replace为true、false的区别：
Markdown

对比transclude为true、false的区别：
Markdown

具体审查：

<body>
<hello><div>Hi there :transclude: true<span ng-transclude="">
    <br class="ng-scope">
    <span class="ng-scope">原始的内容，</span><br class="ng-scope">
    <span class="ng-scope">还会在这里。</span>
</span></div></hello>
<hello><div>Hi there :transclude: true<span ng-transclude=""></span></div></hello>

<br>

<hello1><div>Hi there 1 :transclude: false<span ng-transclude=""></span></div></hello1>
<hello1><div>Hi there 1 :transclude: false<span ng-transclude=""></span></div></hello1>
<br>

<div>Hi there 2 :replace: true</div>
<div>Hi there 2 :replace: true</div>
<br>

<hello3><div>Hi there 3 : replace: false</div></hello3>
<hello3><div>Hi there 3 : replace: false</div></hello3>

<br>
<div>Hi there 4 :replace: true,  transclude: true<span ng-transclude="">
    <br class="ng-scope">
    <span class="ng-scope">原始的内容4，</span><br class="ng-scope">
    <span class="ng-scope">还会在这里4。</span>
</span></div>
<div>Hi there 4 :replace: true,  transclude: true<span ng-transclude=""></span></div>

<br>
<hello5><div>Hi there 5 :replace: false,  transclude: false<span ng-transclude=""></span></div></hello5>
<hello5><div>Hi there 5 :replace: false,  transclude: false<span ng-transclude=""></span></div></hello5>

<script>
    var appModule = angular.module('app', []);
    appModule
        .directive('hello', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there :transclude: true<span ng-transclude></span></div>',
                transclude: true
                /*把<hello>标签替换成我们所编写的HTML模板，但是<hello>标签内部的内容保持不变。*/
            };
        })
        .directive('hello1', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 1 :transclude: false<span ng-transclude></span></div>',
                transclude: false
            };
        })
        .directive('hello2', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 2 :replace: true</div>',
                replace: true/* 将视图模板template替换到指定位置hello2 */
            };
        })
        .directive('hello3', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 3 : replace: false</div>',
                replace: false/*默认为 false*/
            };
        })
        .directive('hello4', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 4 :replace: true,  transclude: true<span ng-transclude></span></div>',
                replace: true, /*默认为 false*/
                transclude: true
            };
        })
        .directive('hello5', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 5 :replace: false,  transclude: false<span ng-transclude></span></div>',
                replace: false, /*默认为 false*/
                transclude: false
            };
        });
</script>

</body>