资源描述:
《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的{}中传入特殊的前缀标识符来进行数据的绑定从而达到通信的目的。@是一个单向绑定的前缀标识符,在元素中以属性使用,例如