AngularJS自定义指令的开发及应用

AngularJS自定义指令的开发及应用

ID:41760298

大小:74.50 KB

页数:4页

时间:2019-09-01

AngularJS自定义指令的开发及应用_第1页
AngularJS自定义指令的开发及应用_第2页
AngularJS自定义指令的开发及应用_第3页
AngularJS自定义指令的开发及应用_第4页
资源描述:

《AngularJS自定义指令的开发及应用》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、AngularJS自定义指令的开发及应用舒瑶郑胜三峡大学理学院三峡大学计算机与信息学院X关注成功!加关注后您将方便地在我的关注中得到本文献的被引频次变化的通知!·新浪微博·腾讯微博·人人网·开心网·豆瓣网·网易微博摘    要:伴着互联网的快速发展,Web各种开发技术如雨后春笋般地涌现,以适应互联网的业务需求。Web前端技术是Web开发中一个不可或缺的关键环节,因为现代互联网对Web前端技术的要求越来越高。AngularJS是Google公司推出的一款轻量级MVC模式的JavaScript框架,完美

2、地通过将视图、数据模型和行为进行分离而实现MVC模式。AngularJS的创新之举就是用户可以自己定义指令,实现特定的功能,因此AngularJS已经成为最受广大开发者欢迎和引领潮流的前端技术。关键词:AngularJS框架;Web开发技术;directive技术;MVC框架;作者简介:舒瑶(1993-),女,硕士,研究方向:图像处理、模式识别。1概述自定义指令的格式一般如下:其中,restrict的值可以为E、A、C、M,E表示作为元素使用,A表示作为属性使用,C表示作为类名使用,M表示作为注释使

3、用。templateUrl表示引用HTML模板的URL,也可以直接将模板写入到当前directive中。replace表示使用模板替换原始标记,指令内原有的数据将被清空。scope域是AngularJS中的要点之一,子作用域通常会通过继承来获取父作用域的属性和方法,这是基于JavaScript原型继承机制实现的。但在directive中是一个例外,directive中创建的scope作用域可以继承父作用域,可以创建自己的scope作用域并继承父作用域,同时也可以创建自己独立的作用域,与父作用域毫无关

4、系。值得注意的是,directive中的scope作用域继承的父作用域并不在其原型链上。当scope属性设置为false时,此时子作用域与父作用域共享同一个作用域,即拥有相同的属性和方法,无论子作用域中或者父作用域中的模型数据发生变化,都会影响对方的模型数据;当scope属性设置为true时,directive会创建一个新的子作用域,子作用域会继承父作用域的属性和方法进行初始化,初始化完毕后,子作用域与父作用域均不会影响双方的模型数据;当scope属性设置为{},directive会创建一个独立隔离

5、新的子作用域,这使得directive不必依赖外部环境却可以正常工作[1]。Controller的主要作用是封装一些行为供其他指令使用,主要是自身的方法和属性。2自定义指令的开发自定义开发的指令如下:其中,通过元素id绑定事件,当事件是在id为preProductNo或currentProductNo的元素上由enter键触发时,则可以执行指令controller中定义的相关方法。scope是当前指令的独立隔离作用域,不会受到父级作用域的影响,同时也不会影响父级作用域。由于文中自定义指令使用的是独立

6、隔离作用域,因此与父级作用域通信时,需要向scope的{}中传入特殊的前缀标识符来进行数据的绑定从而达到通信的目的。@是一个单向绑定的前缀标识符,在元素中以属性使用,例如

,属性的名字需要用-将两个单词连接;=是个双向数据绑定的前缀标识符,例如
;&是一个绑定函数的的前缀标识符,例如

7、()">

[2]。在新创建指令的作用域对象中,使用属性的名字进行绑定时,要使用驼峰命名标准,例如scope:{3自定义指令的应用首先,创建AngularJS应用来使用自定义指令。其创建的整体代码如下:其中,ng-app指令定义了应用程序,ng-controller定义了控制器,angular.module定义了一个AngularJS应用。当AngularJS应用启动时,通过MyController的别名vm将paras与指令的myOption前缀标识符进行绑定,对指令进行初始化。当Angu

8、larJS启动并初始化完毕后,界面将如图1所示。图1初始化完成界面  下载原图当在父产品的产品号输入框中输入父产品号回车时,将会触发指令中绑定父产品号输入框的事件。由于指令中的myOption与父级的vm.paras是双向绑定,因此在父产品号中敲回车键时,将调用paras中的preProductNoEnterHandle方法,即父级controller中的preProductNoEnterHandle方法。当preProductNoEnterHandle方法执行完毕后

当前文档最多预览五页,下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签