angularjs指令的学习

指令是angluarjs的一个标志,是有别于其他框架的重要特征,因此学习angularjs,指令是必须认真而系统的学习的。

指令概述

指令是一种执行信号,发布了一个指令就要某种行为,在html中各种标签可以理解为指令,例如a标签,就是告诉浏览器要创建一个超链接。

就是一个指令的基本格式,指令使用时只需把指令的标签放在相应的位置就行

由于本团队使用了yeoman创建项目,因此创建指令可以使用yeoman的命令:

yo angular:directive  

yoeman还有许多便捷的命令,这里不再细说

指令的常用属性

restrict

restrict属性指出的是指令在html中的使用方法,一共有"E","A","M","C"四种,对应标签(element),属性(attribute),类(class),注释(comment);可以多个同时使用,比如EAC,表示支持多种方式的使用

replace

这是指令的另一个属性,暂时没想到他应该在何种情况下使用,但是书上既然专门介绍了还是写一写,加深一下印象。

当设置replace为true时,模板中的内容替换指令为标记,这是书上的说法,我觉得说的不太明白,看图一下就懂了。

transclude

将视图模板(Template或TemplateUrl)替换到指定位置的视图(Restrict),
transclude与replace有一些相似之处,因此拿他们对比一下




    
    My AngularJS App
    
    




    
原始的内容,
还会在这里。


原始的内容1,
还会在这里1。

简单明了。

(引用于该博客https://blog.csdn.net/sinat_3...)

link

link就是一个函数


scope参数表示作用域,element表示指令中的元素,可以通过内置的jqLite调用,jqLite是一个压缩版的jQuery,attrs参数表示指令元素的属性集合,通过这个可以获取元素中的各种属性。

compaile

没搞太懂,又因为不常用就不细说了。

scope

scope是指令中一个很强大也很常用的属性
scope属性包含两种类型,一种是布尔值,另一种是json对象。

scope是布尔值

scope属性自定义指令时默认值就是布尔类型的,初始值为false,指令中的作用域就是指令元素所在的作用域两者是相同的。如果scope为true,则表示独立创建,,当他的内容发生变化时并不会修改父作用域的内容。

scope是对象

如果scope是对象,那么父作用域与子作用域是完全独立的,不存在任何关联。如果要用父作用域的属性和方法需要在scope属性对应的json对象中添加绑定策略:
@ :把当前属性作为字符串传递,你还可以绑定来自外层scope的值,在属性值中插入双括号即可,此方法是单项绑定;

= :与父scope中的属性进行双向绑定

& :传递来自父scope的函数,稍后再调用.

requeire和controller

当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性。
关于这个,看到一篇讲解很好的文章:https://my.oschina.net/u/2342...

你可能感兴趣的:(angularjs)