Angular指令之restict匹配模式的详解

Angular指令之restict匹配模式的详解

<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 -->

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

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

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

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

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

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

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

以上就是Angular指令之restict匹配模式的实例详解，本站有关AngularJS 的文章还有很多，希望大家搜索查阅，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • AngularJS点击添加样式、点击变色设置的实例代码

    AngularJS点击添加样式、点击变色设置的实例代码

    本文介绍了AngularJS点击添加样式.点击变色设置的实例代码,分享给大家,具体如下: 首先解释需求是这样的,有个列表,当你点击哪一行时,哪一行背景变成灰色,在JQ中,大家都知道,这是非常容易的,加一个addClass就行了,那么AngularJS如何实现呢? 下面我们看代码部分 <!doctype html> <html ng-app="a2_11"> <head> <title>添加元素样式</title> <sc

  • Angularjs的键盘事件的绑定

    Angularjs的键盘事件的绑定 推荐button 方法一:ng内置指令 <button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button> 说明:在对应的控制器中的$scope上绑定一个t

  • Angularjs 事件指令详细整理

    Angularjs 事件指令详细整理 ngClick 适用标签:所有 触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me</button> </div> #script angular.m

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • Angularjs的$http异步删除数据详解及实例

    Angularjs的$http异步删除数据详解及实例 有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了. 嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑 怎么确定数据是否删除成功? 怎么同步视图的数据库的内容? 1.思路 1.实现方式一 删除数据库中对应的内容,然后将$scope中的对应的内容splice 2.实现方式二 删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要

  • Angular中自定义Debounce Click指令防止重复点击

    在这篇文章中,我们将介绍使用 Angular Directive API 来创建自定义 debounce click 指令.该指令将处理在指定时间内多次点击事件,这有助于防止重复的操作. 对于我们的示例,我们希望在产生点击事件时,实现去抖动处理.接下来我们将介绍 Directive API,HostListener API 和 RxJS 中 debounceTime 操作符的相关知识.首先,我们需要创建 DebounceClickDirective 指令并将其注册到我们的 app.module.

  • Angular通过angular-cli来搭建web前端项目的方法

    Angular通过angular-cli来搭建web前端项目的方法

    准备前提:已经搭建好angular-cli环境,还未搭建好的请参见http://www.jb51.net/article/114254.htm 1 新建一个文件夹 该文件夹用来存放所有利用angular-cli搭建的web前端项目 2 启动命令窗口,并进入该文件夹 3 创建新项目 ng new 项目名称 注意:项目名称最好全部用字母 3.1 到文件夹中去查看项目是否成功创建 4 通过文本编辑器打开src文件夹下的index.xml文件 三少使用sublime打开的效果如下 4.1 代码详解 这就

  • angular中实现li或者某个元素点击变色的两种方法

    本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo

  • Angular指令之restict匹配模式的详解

    Angular指令之restict匹配模式的详解 <body data-ng-app="myapp"> <runn2></runn2> <div data-runn2></div> <div class="runn2"></div> <!-- directive: runn2 --> <script> var app=angular.module("

  • 正则表达式教程之匹配一组字符详解

    本文实例讲述了正则表达式教程之匹配一组字符的方法.分享给大家供大家参考,具体如下: 注:在所有例子中正则表达式匹配结果包含在源文本中的[和]之间,有的例子会使用Java来实现,如果是java本身正则表达式的用法,会在相应的地方说明.所有java例子都在JDK1.6.0_13下测试通过. 一.匹配多个字符中的某一个 在上一篇<正则表达式教程之匹配单个字符详解>中的一个匹配以na或sa开头的文本文件例子中,使用的正则表达式是.a.\.txt.如果还有一个文件是cal.txt,那么也将会被匹配到.如

  • python实现括号匹配的思路详解

    1.用一个栈[python中可以用List]就可以解决,时间和空间复杂度都是O(n) # -*- coding: utf8 -*- # 符号表 SYMBOLS = {'}': '{', ']': '[', ')': '(', '>': '<'} SYMBOLS_L, SYMBOLS_R = SYMBOLS.values(), SYMBOLS.keys() def check(s): arr = [] for c in s: if c in SYMBOLS_L: # 左符号入栈 arr.appe

  • shell模糊匹配与正则详解

    前言: 正则可以实现一些简单的功能,并用在脚本中,如检测ip地址是否符合规范,检测文件名是否符合规范等等. 正则表达式 正则表达式主要是用来描述一个句法规则的模式.其实说的通俗一点,就是利用字符和元字符的组合,对一些符合既定句法的模式进行模糊匹配.它的主要功能是文本查询和字符串操作. 正则表达式的基本元素包括普通字符和元字符,在Linux shell里面,常用的正则表达式元字符集为:S={*  .  ^  $  []  \  \<\>  \{\}  \{n,\}  \{n,m\} },每一个元

  • java编程创建型设计模式工厂方法模式示例详解

    java编程创建型设计模式工厂方法模式示例详解

    目录 1.什么是工厂方法模式? 2.案例实现 3.JDK中的工厂方法模式 1.什么是工厂方法模式? 工厂方法模式设计方案:  将披萨项目的实例化功能抽象成抽象方法,在不同的口味点餐子类中具体实现. 工厂方法模式:  定义了一个创建对象的抽象方法,由子类决定要实例化的类.工厂方法模式将对象的实例化推迟到子类. 何时使用?  不同条件下创建不用实例时.方法是让子类实现工厂接口. 2.案例实现 假如说,我们现在有这样一个需求:客户在点披萨时,可以点不同口味的披萨,比如北京的奶酪pizza.北京的胡椒p

  • Python+FuzzyWuzzy实现模糊匹配的示例详解

    Python+FuzzyWuzzy实现模糊匹配的示例详解

    目录 1. 前言 2. FuzzyWuzzy库介绍 2.1 fuzz模块 2.2 process模块 3. 实战应用 3.1 公司名称字段模糊匹配 3.2 省份字段模糊匹配 4. 全部函数代码 在日常开发工作中,经常会遇到这样的一个问题:要对数据中的某个字段进行匹配,但这个字段有可能会有微小的差异.比如同样是招聘岗位的数据,里面省份一栏有的写“广西”,有的写“广西壮族自治区”,甚至还有写“广西省”……为此不得不增加许多代码来处理这些情况. 今天跟大家分享FuzzyWuzzy一个简单易用的模糊字符

  • Java结构型设计模式之享元模式示例详解

    Java结构型设计模式之享元模式示例详解

    目录 享元模式 概述 目的 应用场景 优缺点 主要角色 享元模式结构 内部状态和外部状态 享元模式的基本使用 创建抽象享元角色 创建具体享元角色 创建享元工厂 客户端调用 总结 享元模式实现数据库连接池 创建数据库连接池 使用数据库连接池 享元模式 概述 享元模式(Flyweight Pattern)又称为轻量级模式,是对象池的一种实现.属于结构型模式. 类似于线程池,线程池可以避免不停的创建和销毁多个对象,消耗性能.享元模式提供了减少对象数量从而改善应用所需的对象结构的方式. 享元模式尝试重用

  • Java设计模式中桥接模式应用详解

    目录 1.桥接(Bridge)设计模式定义 2.桥接设计模式优点以及不足 3.桥接设计的实现思路 4.桥接设计模式示例 5.桥接模式的应用场景 6.桥接设计模式和适配器设计模式对比 编程是一门艺术,大批量的改动显然是非常丑陋的做法,用心的琢磨写的代码让它变的更美观. 显示生活中有物品具有多个维度的属性,比如文字有颜色和字体两个维度的差别,汽车有颜色和牌子两个维度的属性等.如果用继承方式,不但对应的子类很多,而且扩展困难.如果用桥接模式就能很好地解决这些问题. 1.桥接(Bridge)设计模式定义

  • 关于angular js_$watch监控属性和对象详解

    $Watch:(监听一个model,当一个model每次改变时,都会触发第二个函数) $watch('watchFn',watchAction,deepWatch) watchFn:带有Angular 表达式或者函数的字符串,它会返回被监控的数据模型的当前值. watchAction: 一个函数function(newValue,oldValue){},当watchFn 发生变化时会被调用 deepWatch:默认为false,监听数组的某个元素或者对象的属性时设置为true; 监控一个属性:

  • linux指令man page之rm,mv详解

    linux指令man page之rm,mv详解   man rm NAME rm - 移除文件档案或者目录 SYNOPSIS rmdir [OPTION]... FILE... OPTIONS -f, --force 忽略不存在的文件,不显示提示信息 -i, --interactive 移除前询问 -r, -R, --recursive 递归移除目录及其包含的文件 --help 显示帮助信息 --version 显示版本信息   man mv NAME mv - 移动(重命名)文件 SYNOPS

随机推荐