angular(指令--restict匹配模式)

最新推荐文章于 2022-01-09 21:23:44 发布

正在输入代码中

最新推荐文章于 2022-01-09 21:23:44 发布

阅读量832

点赞数

分类专栏： web前端 Angular 文章标签： angular restict

本文链接：https://blog.csdn.net/qq_26744901/article/details/51147994

版权

web前端同时被 2 个专栏收录

145 篇文章 0 订阅

订阅专栏

Angular

18 篇文章 0 订阅

订阅专栏

<body data-ng-app="myapp">
<runn2></runn2>
<div data-runn2></div>
<div class="runn2"></div>
<!-- directive: runn2 -->
<script>
    var app=angular.module("myapp",[]);
    app.directive('runn2',function(){
        return{
            restrict:"EACM",
            replace:true,
            template:"<h1>自定义指令</h1>"
        };
    });
</script>

restict匹配模式：分为四种：

1.元素匹配（E）:<runn2></runn2>

2.属性匹配（默认A）<div data-runn2></div>

3.样式类匹配（C）<div class="runn2"></div>

4.注释匹配（M）

注意：directive前面需要有空格runn2后面需要有空格（这是一个小坑）

注释匹配无法增加多个标签例：template:"<h1>自定义指令</h1><h2>自定义指令</h2>" 会导致报错

但是在<div><h1>自定义指令</h1><h2>自定义指令</h2></div>这样包含标签却是正常的，小坑一个

注意：必须replace=true，否则注释匹配无法使用

推荐使用元素和属性的方式使用指令

当需要创建带有自己的模板的指令时，使用元素名称的方式创建指令

当需要为已有的HTML标签增加功能时，使用属性的方式创建指令

正在输入代码中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular(指令--restict匹配模式)

var app=angular.module("myapp",[]); app.directive('runn2',function(){ return{ restrict:"EACM", replace:true, template:"自定义指令" }; });resti
复制链接

扫一扫

专栏目录