打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
爱创课堂 前端培训 前端教程 angular教程 课堂笔记

下午复习

自定义指令

Directive

第一步在dom中创建自定义指令

第二步在js中通过directive方法来定义这自定义指令,是应用程序app提供的一个方法

Directive
方法

第一个参数自定义指令的名称,(这里用的是驼峰式命名,页面中使用的是-命名自定义指令名称)

第二个参数自定义指令处理函数

参数是空数组,因此想使用什么服务就要传递什么服务

作用域是window

返回值是一个对象,描述自定义指令的对象

这个函数只执行一次

返回的对象有一些属性

Restrict
定义类型,自定义有四种类型 ECMA 例如自定义指令my-directive

E
自定义元素

语法 <my-directive></my-directive>

C
类类型的自定义指令

语法 <div class=”my-directive”></div>

M
注释指令

语法 <!-- directive: my-directive -->

A
属性指令

语法 <div my-directive></div>

Template
定义自定义指令单模板

他的值是一个字符串,在字符串中我们可以使用angular指令,也可以使用插值语法等等

Replace
是否替换

True
会用模板内容替换指令元素

False
会将模板内容插入到指令元素内

Controller
为自定义指令定义一个控制器,在控制器中通常会创建一个作用域

$scope
提供做作用域服务

$element
提供获取元素的服务

如果没有引入jquery时候,这个元素是jqlite对象

如果引入jquery,这个元素是jquery实例化对象

注意:不论有没有引入jquery,这两种是方式是一致的

$attrs
提供获取指令元素属性的服务

对象上每一个属性对应一个指令元素上的属性(通过驼峰式命名处理的属性名称)

对象上属性值就是指令元素上的属性值

$attr
表示驼峰式命名属性到指令元素上属性名称的映射

Scope
隔离作用域的,有没有隔离,如果隔离要看scope的值

没有模板时候

True
此时指令作用域与控制器作用域(父作用域)是独立的,因此互不影响

False
此时指令作用域与父作用域同享同一个,因此修改指令作用域会影响父作用域,修改父作用域会影响 指令作用域

{}
此时指令作用域与父作用域是独立,但是在指令元素内的插值变量使用的是父作用域中的数据
有模板情况下

True
此时指令作用域有父作用域是独立的,彼此互不影响

False
此时指令作用域与父作用域共享同一个,因此修改指令作用域会影响父作用域,修改父作用域会影响指令作用域

{}
此时指令作用域与父作用域也是独立的,互不影响,与值为true的区别是,我们在这种情况下可以通过作用域修饰符使用属性中的数据

@
作用域修饰符

使用分两步

第一步在自定义指令上定义属性数据,此时定义的值是通过插值传入的动态数据

第二步用@绑定数据

特点

1
数据只能从父作用域中通过指令元素的属性传递给指令作用域,这种传递时单向

2
父作用域初始化的数据会覆盖指令作用域中的初始化数据变量

=
作用域修饰符

使用分两步

第一步在自定义指令上定义属性数据,此时定义值是不能使用插值符号,(传递的是一个字符串),传递时一个静态数据

第二步用=绑定数据

对象属性表示指令作用域中数据变量,

对象属性值是=指令元素属性名称(是通过驼峰式命名转化的)

特点

1
双向绑定,父作用域变量改动会影响指令作用域,指令作用域对变量的修改会影响到父作用域(双向绑定)

2
指令作用域中初始化的数据会覆盖父作用域中初始化的数据变量 

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
【AngularJS】作用域详解
AngularJS自定义指令详解(有分页插件代码)
vue
学习AngularJs:Directive指令用法(完整版)
Angular开发中的注意事项
AngularJS入门教程00:引导程序 | AngularJS中文社区
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服