• / 4
  • 下载费用:10 金币  

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

关 键 词:
AngularJS自定义指令的开发及应用.doc
资源描述:
AngularJS 自 定 义 指 令的 开 发 及 应用 舒瑶 郑胜 三 峡 大学 理 学院 三 峡 大学 计算 机 与信 息 学院 摘 要: 伴着互联网的快速发展, Web 各种开发技术如雨后春笋般地涌现, 以适应互联网 的业务需求。Web 前端技术是 Web 开发中一个不可或缺的关键环节, 因为现代互 联网对Web 前端技术的要求越来越高。AngularJS 是Google 公司推出的一款轻 量级MVC 模式的Java Script 框架, 完美地通过将视图、 数据模型和行为进行分 离而实现MVC 模式。AngularJS 的创新之举就是用户可以自己定义指令, 实现特 定的功能, 因此AngularJS 已经成为最受广大开发者欢迎和引领潮流的前端技 术。 关键词 : AngularJS 框架; Web 开发技术; directive 技术; MVC 框架; 作 者简 介: 舒瑶 (1993-) , 女, 硕士, 研究方向:图像处理、模式识别。 1 概述 自定义指令的格式一般如下: 其中, restrict 的值可以为 E、A、C、M, E 表示作为元素使用, A 表示作为属性 使用, C 表示作为类名使用, M 表示作为注释使用。template Url 表示引用 HTML 模板的URL, 也可以直接将模板写入到当前 directive 中。replace 表示使用模 板替换原始标记, 指令内原有的数据将被清空。scope 域是Angular JS 中的要 点之一, 子作用域通常会通过继承来获取父作用域的属性和方法, 这是基于 Java Script 原型继承机制实现的。但在 directive 中是一个例外, directive 中创建的scope 作用域可以继承父作用域, 可以创建自己的scope 作用域并继承 父作用域, 同时也可以创建自己独立的作用域, 与父作用域毫无关系。 值得注意 的是, directive 中的scope 作用域继承的父作 用域并不在其原型链上。 当scope 属性设置为false 时, 此时子作用域与父作用域共享同一个作用域, 即拥有相 同的属性和方法, 无论子作用域中或者父作用域中的模型数据发生变化, 都会 影响对方的模型数据;当scope 属性设置为 true 时, directive 会创建一个新的子作用域, 子作用域会继承父作用域的属性和方法进行初始化, 初始化完毕后, 子作用域与父作用域均不会影响双方的模型数据;当scope 属性设置为{}, directive 会创建一个独立隔离新的子作用域, 这使得directive 不 必依赖外部 环境却可以正常工作[1]。Controller 的主要作用是封装一些行为供其他指令使 用, 主要是自身的方法和属性。 2 自定义指令的开发 自定义开发的指令如下: 其中, 通过元素 id 绑定事件, 当事件是在 id 为pre Product No 或 current Product No 的元素上由 enter 键触发时, 则可以执行指令 controller 中定义的 相关方法。scope 是当前指令的独立隔离作用域, 不会受到父级作用域的影响, 同时也不会影响父级作用域。 由于文中自定义指令使用的是独立隔离作用域, 因 此与父级作用域通信时, 需要向scope 的{} 中传入特殊的前缀标识符来进行数 据的绑定从而达到通信的目的。@是一个单向绑定的前缀标识符, 在元素中以属 性使用, 例如, 属性 的名字需要 用-将两个单词连接;=是个双向数据绑定的前缀标识符, 例如;& 是一个绑定函数的的前缀标识符, 例如[2]。在新创建指令的 作用域对象中, 使用属性的名字进行绑定时, 要使用驼峰命名标准, 例如 scope:{ 3 自定义指令的应用 首先, 创建 Angular JS 应用来使用自定义指令。其创建的整体代码如下: 其中, ng-app 指令定义了应用程序, ng-controller 定义了控制器, angular.module 定义了一个 Angular JS 应用。 当Angular JS 应用启动时, 通过My Controller 的别名vm 将paras 与指令的 my Option 前缀标识符进行绑定, 对指令进行初始化。当 Angular JS 启动并初 始化完毕后, 界面将如图 1 所示。 图1 初始化完成界面 下载原图 当在父产品的产品号输入框中输入父产品号回车时, 将会触发指令中绑定父产 品号输入框的事件。 由于指令中的my Option 与父级的vm.paras 是 双向绑定, 因 此在父产品号中敲回车键时, 将调用paras 中的pre Product No Enter Handle 方法, 即父级 controller 中的 pre Product No Enter Handle 方法。当 pre Product No Enter Handle 方法执行完毕后, 由于paras 中的值发生变化, 基于 双向绑定的机制, 因此指令中的 my Option 也会发生变化。 由于指令中的模板是 使用ng-model 进行数据的双向绑定, 因此 my Option 的变化导致模板中的数据 模型发生变化, 因此父产品和子产品将会在界面中显示。 在父级产品号处回车时, 子级产品信息默认显示当前最新子产品信息, 界面如图2 所示。 图2 父级产品号回车显示信息 下载原图 同理, 在子级产品号处回车时, 将会调用paras 中的current Product No Enter Handle 方法, 即父级 controller 中的current Product No Enter Handle 方法, 同样基于paras 的变化及双向绑定的原理, 子级产品号回车后, 界面如图 3 所 示。 图3 子级产品号回车显示信息 下载原图 4 结语 通过自定义 指令的开发, 能够清晰和深刻地理解自定义指令的开发以及使用, 能够较容易理解前端 Angular JS 技术关于自定义指令的开发。 参考文献 [1]Brand Green, Sbyam Sesbadri. 用Angular JS 开发下一代Web 应用[M].北京: 电子工业出版社, 2013.
展开阅读全文
  微传网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
0条评论

还可以输入200字符

暂无评论,赶快抢占沙发吧。

关于本文
本文标题:AngularJS自定义指令的开发及应用.doc
链接地址:https://www.weizhuannet.com/p-1689.html
微传网是一个办公文档、学习资料下载的在线文档分享平台!

网站资源均来自网络,如有侵权,请联系客服删除!

 网站客服QQ:80879498  会员QQ群:727456886

copyright@ 2018-2028 微传网络工作室版权所有

     经营许可证编号:冀ICP备18006529号-1 ,公安局备案号:13028102000124

收起
展开