AngularJS自定义指令之可选参数replace

最新推荐文章于 2021-10-21 17:13:27 发布

兰亭古墨

最新推荐文章于 2021-10-21 17:13:27 发布

阅读量717

点赞数

CC 4.0 BY-SA版权

分类专栏： Angularjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/hefeng6500/article/details/75126302

Angularjs 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了AngularJS中自定义指令的replace属性的作用。通过一个示例展示了当replace设置为true时，DOM结构将直接替换为指定的模板内容；而设置为false时，则保留原有的元素结构，仅替换内部的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

发现这个可选参数就是闲的蛋疼！！！
不多说，看代码

可选参数：replace
默认为false，可以设置为true
若设置为true，dom中显示为：

<h3>Hello World</h3>

这里写图片描述

若设置为false

<ts-hello>
    <h3>Hello World</h3>
</ts-hello>

这里写图片描述

<!DOCTYPE html>
<html ng-app='myApp'>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-controller='firstCtrl'>

        <ts-hello>
            11
        </ts-hello>

        <script src='js/angular.js'></script>
        <script>
            var app = angular.module('myApp',['ng']);
            app.controller('firstCtrl',['$scope',function($scope){

            }]);
            app.directive('tsHello',function(){
                return {
                    template:'<h3>Hello World</h3>',
                    restrict:'ECAM',
                    replace:true
                }
            });
        </script>
    </body>
</html>