查看: 2942|回复: 0

[JavaScript/JQuery] 爱创课堂 前端培训 前端教程 angular教程 课堂笔记 复习

发表于 2018-1-19 09:48:18
复习自定义指令

为dom元素实现一些新功能,方便我们开发使用

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

第二步在js中通过directive方法来创建一个指令

Directive方法,要在页面应用程序app上直接调用

第一个参数名称 自定义指令名称(以驼峰式命名,在页面dom中使用的是-分隔单次)

第二个参数函数 处理函数,通过返回值来得到一个指令对象

参数 没有参数的,使用什么可以通过参数注入的方式注入进来

作用域 全局作用域

返回值 指令对象

只执行一次

Restrict 指令的类型 ECMA

E 表示自定义元素指令,无法传递数据

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

C 表示类指令

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

M 表示注释指令

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

A 表示属性指令

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

Controller 定义控制器,创建一个作用域

$scope 表示作用域服务

$element 表示自定义指令元素的jqlite对象

$attrs 表示自定义指令元上的属性

属性名表示自定义指令元素上的属性名(做了驼峰命名转化)

属性值表示自定义指令元素上的属性值

$attr 属性名与自定义指令元素上属性名的映射

Replace 是否替换自定义元素

True 替换自定义指令元素(用模板)

False 不会替换自定义指令元素(对于自定义指令的子元素会删除,要保留只能通过transclude保留)

Template 定义内部字符串模板,在模板中可以使用其他指令,可以使用插值,可以使用表达式

templateUrl 定义外部引用的模板,在模板中可以使用其他指令,可以使用插值,可以使用表达式

Scope 隔离作用域

没有模板

True 指令作用域与父作用域是独立的,互不影响

False (默认情况)指令作用域与父作用域是同享同一个作用域(父作用域),指令作用域修改会影响父作用域,父作用域修改数据会影响子作用域

{} 指令作用域与父作用域是独立,但是,页面中指令元素内插值使用的数据是父作用域中的数据
有模板时候

True  指令作用域与父作用域是独立,互不影响

False 默认,指令作用域与父作用域是共享同一个作用域(父作用域)

{} 指令作用域与父作用域是独立的,但是模板中使用的插值数据是指令作用域中的

当scope值是{}时候,我们可以使用插值符号,来使用指令元素属性上的数据()

作用域修饰符@

第一步 在指令元素上通过属性来添加数据,此时的数据是动态的要用插值符号

第二步 在{}中定义@修饰符处理的指令元素属性

特点

1 单向的,父作用域中数据修改会影响子作用域,子作用域中数据修改不会影响父作用域

2 覆盖,父作用域中初始化数据会覆盖子作用域中初始化的数据

作用域修饰符=

第一步 在指令元素上通过属性来添加数据,此时数据是静态的,不能使用插值符号,要根据这个字符串的值做变量映射

第二步 在{}中定义=修饰符处理掉指令元素属性

特点

1 ‘双向绑定’,父作用域中数据修改会影响指令作用域,指令作用域中数据的修改也会影响父作用域

2 覆盖,子作用域中初始化数据会覆盖掉父作用域中初始化的数据

Link 实现自定义指令功能

常见的有三个参数

Scope 指令作用域(link方法中作用域已经被创建)

Jqlite 自定义指令元素对jqlite象

如果引入jquery库,就是jquery对象

Attrs 自定义指令元素属性对象

属性名表示自定义指令元素上的属性名(做了驼峰命名转化)

属性值表示自定义指令元素上的属性值

$attr 属性名与自定义指令元素上属性名的映射

作用域 全局作用域

Scope.$watch 监听属性数据值的变化

第一个参数表示属性名称

第二个参数,回调函数,三个参数,当属性名称改变的时候会调用该方法

第一个参数 属性新的数据值 newValue

第二个参数 属性上一个数据值oldValue

第三个参数,指令作用域Scope

Compile 自定义指令编译的全过程

参数,默认情况下能看到连个

Jqlite 自定义指令元素jqlite对象

Attrs 自定义指令元素属性对象

作用域 自定义指令对象,通过this使用其他属性或者方法

返回值 link函数 这个函数跟link是一样的

每次创建都会执行

执行时候作用域没有创建,在返回函数中(link)作用域才能使用,也就是说作用域是创建在compile,返回值函数执行之前

Compile优于link方法执行,不论页面中有多少个指令元素,都要先执行compile,在执行link
Transclude 将自定义指令中未知内容插入到模板中

第一步,定义模板(内部模板,或者外部模板)

第二步,定义transclude 值必须是true

第三步,在模板中要使用ng-transclude,指明插入的地点

Require 引入其他指令

引入两种方式

通过字符串引入一个指令

此时link方法第四个参数,就是这个指令控制器

通过一个数组引入多个指令

此时link方法第四个参数,就是一个数组,数组每个成员与这些指令控制器是一一对应的

往期文章

angular课堂笔记 第一天

js基础 定时器

js基础 IE6,7,8方法

js基础 高级浏览器

js基础 对应思想 排他思想

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/




回复

使用道具 举报