AngularJS中的指令详解(1)
来源:互联网 发布:淮南市大数据办公室 编辑:程序博客网 时间:2024/06/11 10:48
1.我们知道AngualrJS的重要的特性(1)MVC/MVVM(2)双向数据绑定(3)模块化和依赖注入(4)指令。
下面来介绍下什么是AngularJS中的指令:
首先,什么是指令,举例来说明:
JS部分:
angular.module('myapp',[]) .directive('hello',function(){ return{ restrict:'E', template:'<div>Hi everyone!</div>', replace:true } })
html部分:<hello></hello>
显示效果:Hi everyone!
这是一个最简单的指令的含义,我们在HTML中使用了一个自定义的指令,结果生成了指令中的DOM元素。我们来分析上面的简单例子:
1) restrict属性:可选值为 AEMC,
其中A表示属性attribute的缩写,若定义为A,则指令的使用方式为:
<div hello></div>
其中E表示是element,表示的是元素,若定义为E,则指令使用:
<div hello></div>
其中M表示的是注释的方式,若定义为M,则指令的使用方式为:
<!-- directive:hello --!><div></div>
其中C表示的是Class的缩写,若定义为C,则指令的使用方式为:
<div class="hello"></div>
2)template
模板,是HTML片段,可编写的量较少,并且也不好修改。
采用其他方式比如templateUrl,通过采用templateUrl,这样就可以不用再JS代码里面编写DOM结构。
templateUrl:'hello.html'
这样就可以把我们所需要的HTML片段写到一个html文件里面,然后直接引用或者调用即可!
3)templateCache
angular.module('myapp'.[]).run(function($templateCache){ $templateCache.put('hello.html','<div>Hi everyone</div>')})myapp.directive('hello',function($templateCache){ return{ restrict:'AECM', template:$templateCache.get('hello.html'), replace:true }})
4)replace
<hello><div>this is a test</div></hello>
如果是replace属性为true,则完全替换掉标签内的内容,如果为false,
则为:
return{ restrict:'E', transclude:true, template:'<div>Hi everyone!<div ng-transclude></div></div>'}
显示效果为:
Hi everyone!
this is a test
我们发现hello标签内的元素并没有被完全替换。
总:指令的执行过程
加载:加载angularJS,并且找到ng-app指令,确定应用的边界。
编译:遍历DOM,找到所有的指令,根据代码template等生成DOM结构,并且执行指令的compile函数。
链接:运行每一条指令的Link函数,一般操作DOM写在link指令中!
2.指令中的link函数
link函数中有4个形参,scope,element,attrs,fatherCtrl
(1)scope
scope所对应的是子类所在的父控制器的scope,举例来说明:
angular.module('myapp',[]) .controller('mycontroller',function($scope){ $scope.hello="hello world"; }) .directive('hello',function(){ return{ link:function(scope,element,attrs) { alert(scope.hello) } } })
此时在指令中会引入父类的
(2).element
link函数中的element指代的是当前引入指令的那个元素本身,我们可以而在element元素的基础上绑定事件等:
angular.module('myapp',[]) .directive('hello',function(){ return{ link:function(scope,element,attrs) { element.bind('click',function(){ alert("hello world") }) } } })
(3)attrs
link函数中的attrs形参,用于获得指令所在dom上的属性,用法如下:
首先我们在html中声明:
<hello name="yuxiaoliang"></hello>然后在angularjs中可以这样来得到name的值: angular.module('myapp',[]) .directive('hello',function(){ return{ link:function(scope,element,attrs) { alert(attrs['name']); } } })
(4)fatherCtrl参数
这个参数用于继承父类指令中的控制器,这个指令比较复杂,我们来看:
<div father child></div>
首先在html中有2个指令,一个father一个child,在angularJS中我们可以这样写道:
angular.module('myapp',[]) .directive('father',function(){ return{ controller:function(){ this.name=function(){ alert('father'); } }, restrict:'A', link:function(){ } } }) .directive('child',function(){ return{ require:'^father', link:function(scope,element,attrs,fatherCtrl) { fatherCtrl.name(); } } });
通过require和fatherCtrl,可以在子类的指令中访问到父类指令中,在controller中定义的方法,注意:父类的controller和控制器的controller并不是同一个东西。
3.指令的独立scope
首先我们来看什么是独立scope,比如我们这里多次使用了同一个指令,
我们在html中这样定义:
<hello></hello><br/> <hello></hello>
在angualrJS中:
“`
angular.module(‘myapp’,[])
.directive(‘hello’,function(){
return{
restrict:’E’,
template:”{{message}}”,
link:function(){ } } })
我们发现生成的元素,如果多次使用了同一个指令他们共享了一个作用域,因此效果是这样的:
只需要在指令中加上scope:{},即可。显示效果如下:
4.scope的绑定策略
如何在指令的template中引入指令坐在控制器父类的方法和数据,这里就需要使用scope的绑定策略。
(1)@
@绑定实现的是字符串之间的绑定,比如我们举例来说,在html中有:
(2) =
=实现的是指令scope与template中scope的双向数据绑定。
(3)and
and实现的是指令scope与template中scope中的函数的绑定。
- AngularJS中的指令详解(1)
- AngularJS指令详解(4)—指令中的绑定策略
- angularjs指令中的compile详解
- angularjs 指令(directive)详解(1)
- AngularJS指令开发(1)——参数详解
- AngularJS实例详解Directive(指令)机制
- AngularJS 详解Directive(指令)机制
- angularjs 指令(directive)详解(2)
- AngularJS中Directive(指令)机制详解
- AngularJS 指令详解
- angularjs指令详解
- AngularJS指令参数详解
- angularJS指令参数详解
- AngularJs directive指令详解
- angularjs的指令详解
- AngularJS 自定义指令详解
- angularjs指令详解
- angularJs指令详解
- 顺时针打印矩阵21
- 32位和64位操作系统下C程序中的类型长度小结
- 2016山东省acm省赛 feed monkeys
- Document to String
- Android UI设计之<十一>自定义ViewGroup,打造通用的关闭键盘小控件ImeObserverLayout
- AngularJS中的指令详解(1)
- 安卓解决从系统安装完成打开和返回桌面打开启动两次应用的问题
- 添加九宫格商品步骤
- JSTL,EL用法的注意点Java.lang.NumberFormatException: For input string “ ”
- Android用户交互概述(UI)——翻译自developer.android.com
- 数据库原理
- VIewPager实现自动轮播
- php 操作mysql 基本函数
- RNN和LSTM