一、指令

指令directive是AngularJS的核心之一包括- 用于扩展HTML元素、属性的指令- 执行特定功能的指令- 自定义指令内置指令基本上都是以ng-开头

二、内置指令

1、属性指令

ng-href:代替a标记的href属性
ng-src:代替img等标记的src属性
ng-disabled:设置表单元素是否可用
ng-checked:设置选项是否选中
ng-readonly:设置文本元素是否只读
ng-selected:设置下拉选项是否选中
ng-class:设置class属性
ng-style:设置style属性,应该是对象或JSON

2、功能指令

ng-app:设置当前元素是 AngularJS根元素ng-controller:用于为应用添加控制器ng-include:用于包含外部的HTML文件ng-if:用于在表达式为false时移除HTML元素ng-switch:根据表达式显示或隐藏对应的部分ng-repeat:用于循环输出指定次数的HTML元素ng-init:执行给定的表达式ng-bind:使用给定的变量或表达式的值来替换HTML元素的内容ng-bind-template:与上类似,可绑定多个ng-cloak:用于在应用加载时防止代码未加载完而出现AngularJs表达式的问题ng-model:用于绑定表单元素到作用域变量中(双向绑定)ng-hide/ng-show:在表达式为true时隐藏/显示HTML元素ng-form:增强HTML表单ng-change:类似于onchange事件ng-click:类似于onclick-事件ng-submit:类似于onsubmit事件

三、自定义指令

1、概述

使用directivej方法可以自定义指令,语法:模块对象.directive(“指令名”,[注入内容,回调函数]);指令名采用骆驼命名法,使用时将驼峰名称改写为短横线连接的名称,如定义时为: itFirst,则使用时为it-first;第一个词不建议使用ng回调函数返回一个JSON对象,该对象包括了自定义指令的配置,即指令对象定义指令对象定义是一个JSON格式,包含大量指令配置项

2、指令的生命周期

加载阶段:以ng-app为入口,确定 EAngularJSt的应用范围编译阶段:遍历应用范围,找到所有指令,根据指令的定义进行DOM转换(由template、templateUrl、replace等配置项决定),如果指令有compile函数则调用链接阶段:应用范围内的每条指令运行link函数,如果有DOM操作,也应该在link函数中执行

3、指令配置项

restrict:字符串,指令以何种形式使用,‘A’ 表示属性Attribute , ‘E’ 表示元素Element 、 ‘C’ 表示类Class 、‘M’ 表示注释Comment( 需加directive:),也可以是它们的组合形式。默认值为AE ,可以通过元素名和属性名来调用指令。template:一段HTML 文本或返回一个HTML 文本的函数,用来填充指令内容,当replace为true时结果必须有且仅有一个根元素 。如果页面中多个指令的模板基本相同,可以使用$templateCache 进行缓存后再使用replace:布尔,是否替换原有元素,默认falsetemplateUrl:指定外部模板文件的路径,或返回路径的函数,用于代替templatetransclude:是否包含原有内容,设置为true 时,可在template中使用ng-transclude指令获取原有内容,即需要 配合ng-transclude 指令使用priority:指定同一元素上多个指令的controller调用的优先级,数值类型,值越大优先级越高,默认为0terminal:同一元素上优先级比本指令低的指令或低层次的指令是否执行,布尔类型scope:表示指令的作用域,取值有三种(false 、true 、{} 空对象),false 表示继承父作用域,同一个作用域;默认值true表示从父作用域继承并创建一个新作用域;{} 空对象表示隔离作用域,默认无法访问父作用域,但可以通过配置绑定( 隔离) 策略,将父作用域中指定数据绑定到隔离作用域中,绑定策略有三种形式:@:单向,父作用域影响隔离作用域,将属性作为字符串传递;=:双向, 父作用域与隔离作用域相互影响,将属性按原类型传递;&:方法的访问形式,注意传参数的写法,必须以对象形式传递可以在以上符号的后面指定绑定的名称( 属性名),也可省略简写link:回调函数,用于处理数据、DOM,可以接受四个参数,分别是作用域scope、元素element、属性attribute、依赖的其它指令控制器controller;出于通用性考虑,scope提供$apply(“ 函数名()”)的形式调用函数,函数名可通过属性传递controller:不同于之前的控制器,是指令自身的控制器,用于向外部公开指令所具有的方法require:字符串,表示所依赖的其它指令名称,此时会将其它指令的控制器注入进link函数,作为第4个参数;指令名称前可以添加符号:^ 表示会在上层指令中查找,?表示找不到则传入null,可以组合成?^

转载于:https://www.cnblogs.com/Coufusion/p/10783940.html

AngualrJS之自定义指令相关推荐

  1. angular4获得焦点事件_深究AngularJS——如何获取input的焦点(自定义指令)

    关于如何获取input框.textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令.像这种解答,只能说明作者并为真正理解人家的需求.ng-focus是一个事件,跟原生JS(J ...

  2. 深究AngularJS——如何获取input的焦点(自定义指令)

    1. 写在前面 关于如何获取input框.textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令.像这种解答,只能说明作者并为真正理解人家的需求.ng-focus是一个事件 ...

  3. Vue API(directives) 自定义指令

    前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...

  4. input不管用 vue_Vue自定义指令实现快速读取Excel

    前几天因为业务需求,所维护的而后台中出现了大量关于上传下载Excel的操作.因为我们的后台是基于Vue,并且是在 vue-element-admin 的基础上结合实际需求开发而来.vue-elemen ...

  5. 关于Angularjs中自定义指令一些有价值的细节和技巧

    作者:心叶 时间:2018-04-22 10:58 一:自定义指令常用模板 下面是大致的说明,不是全面的,后面来具体说明一些没有提及的细节和重要的相关知识: angular.module('yello ...

  6. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  7. vue点击改变data值_vue 中自定义指令改变data中的值

    通过局部自定义指令实现了一个拖动的指令 html: script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives: ...

  8. Vue自定义指令实现下拉加载:v-loadmore

    和methods平级: directives: {loadmore: {//自定义指令: 下拉加载bind(el, binding) { var p = 0; var t = 0; var down ...

  9. 如何在自定义指令中获取评估属性

    本文翻译自:How to get evaluated attributes inside a custom directive I'm trying to get an evaluated attri ...

最新文章

  1. Lighttpd1.4.20源代码分析 笔记 状态机之错误处理和连接关闭
  2. 控制C++的内存分配
  3. Ubuntu 16.04设置Redis为开机自动启动服务
  4. Django-Model操作数据库(增删改查、连表结构)参考
  5. AI之FL:联邦学习(Federated Learning)的简介、入门、应用之详细攻略
  6. boost::scoped_ptr相关的测试程序
  7. Solr操作中新手常见问题
  8. Ubuntu瘦身与扩容运动
  9. 【计算机系统设计】实践笔记(2)数据通路构建:第一类R型指令分析(2)
  10. [html] 如何给input的右上角加个清除的按钮?
  11. 认识VLAN,并学会VLAN的划分和网络配置实例
  12. JavaScript核心语法——变量与常量
  13. 日志易——中国版的splunk
  14. linux怎样删除链接文件,在 Linux 中怎样移除(删除)符号链接
  15. 杜撰的柏拉图(转自李止介的个人空间)
  16. 地坤诀中所记录的第二元婴的炼制办法与其余的炼制方式不一样
  17. 华为手机 绑定MAC 无法上网
  18. SATA revision 3.2 specification
  19. 复睿智行CC++开发实习面试
  20. 数据挖掘的10大算法我用大白话讲清楚了,新手一看就懂

热门文章

  1. 通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败。错误:“Connection refused: connect。
  2. 关于Wifi WDS的两种模式浅谈
  3. mysql查询本年的数据_MySql查询当天、本周、本月、本季度、本年的数据
  4. 职高计算机专业毕业200字自我鉴定,职高计算机专业毕业生自我鉴定范文
  5. 打开辣妈萌宝很好地承载了宝宝所有的幸福记录
  6. 没有基础但想学手绘设计,可以么?
  7. Web前端开发环境搭建
  8. 轻松掌握averageif(s)、countif(s)、sumif(s)等逻辑计算函数用法
  9. Linear Regression: Least-Squares
  10. 微服务治理框架- - -Spring Cloud