自定义指令
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 指令作用域中初始化的数据会覆盖父作用域中初始化的数据变量
联系客服