欢迎来到微传网! | 帮助中心 分享文档,创造价值!
微传网
全部分类
  • 办公文档 >
    办公文档
    往来文书 招标投标 传真信函 解决方案 事务文书 活动策划 股份制文书 调研文书 规章制度 统计图表 PPT模板素材 工作计划 工作总结 会议纪要 产品手册 课程设计 求职简历 通知/申请 演讲致辞 说明文书 词典 简明教程 办公软件应用 教育范文
  • 中学教育 >
    中学教育
    中学课件 中考 高考 中学作文 职业教育 试题 教学研究 竞赛题 高考英语 初中教育 高中教育 体育理论与教学 中学实验 音乐美术
  • 幼儿/小学教育 >
    幼儿/小学教育
    幼儿教育 小学课件 学习方法 课外知识 爱心教育 教育管理 小学教育
  • 高等教育 >
    高等教育
    研究生课件 大学课件 理学 工学 哲学 历史学 教育学 农学 思想政治 专业基础教材 生物学 语言学 微积分 统计学 实验设计 科普读物
  • 论文 >
    论文
    期刊/会议论文 开题报告 经济论文 管理论文 社科论文 文学论文 医学论文 哲学论文 艺术论文 法律论文 自然科学论文 通讯论文 论文指导/设计 毕业论文 大学论文
  • 管理/人力资源 >
    管理/人力资源
    经营企划 销售管理 代理连锁 工程管理 信息管理 资本运营 企业信息化 市场营销 广告经营 项目管理 营销创新 招聘面试 人事档案 员工关系 企业文化 宣传企划 企业文档 公司方案 商业合同 财务报表 励志书籍工具 咨询培训 劳动就业 商务礼仪 地方省市劳动合同 管理学资料 创业
  • 经济/贸易/财会 >
    经济/贸易/财会
    经济学 财政/国家财政 商品学 市场分析 进出口许可 贸易 网络营销/经济 税收 稽查与征管/审计 资产评估/会计
  • IT计算机 >
    IT计算机
    计算机原理 PHP资料 linux/Unix相关 C/C++资料 Java .NET windows相关 开发文档 管理信息系统 软件工程 网络信息安全 网络与通信 图形图像 行业软件 人工智能 计算机辅助设计 多媒体 软件测试 计算机硬件与维护 网站策划/UE 网页设计/UI 网吧管理 电子支付 搜索引擎优化 服务器 电子商务 Visual Basic 数据挖掘与模式识别 数据库 Web服务 网络资源 Delphi/Perl Python CSS/Script Flash/Flex 手机开发 UML理论/建模 并行计算/云计算 嵌入式开发 计算机应用/办公自 数据结构与算法 SEO
  • 资格/认证考试 >
    资格/认证考试
    全国翻译资格认证 自考 成考 专升本考试 公务员考试 思科认证 微软认证 司法考试 教师资格考试 物流师考试 计算机等级考试 注册税务师 人力资源管理师 会计职称考试 出国培训 质量管理体系认证 医师/药师资格考试
  • 行业资料 >
    行业资料
    社会学 纺织服装 食品饮料 家电行业 造纸印刷 酒店餐饮 物流与供应链 交通运输 旅游娱乐 文化创意 航空/航天 船工业技术 矿业工程 石油、天然气 工业冶金工业 金属学与金属工艺 武器工业 能源与动力工程 原子能技术 化学工业 轻工业/手工业 水利工程 农业工程 农作物 园艺 林业 畜牧 水产/渔业 展会 生活用品 航海/船舶 家居行业 实验 工业设计 室内设计 系统集成 国内外标准规范 新闻/广播 公共安全/安全评价
  • 金融/证券 >
    金融/证券
    股票中长线技巧 股票短线技巧 股票经典资料 股票技术指标学习 金融资料 财经资料 投融资/租赁
  • 研究报告 >
    研究报告
    信息产业 金融 教育 农林牧渔 冶金 石油化工 煤炭 交通 新能源 轻工 产业政策 商业贸易 国防军事 技术指导 安防行业 制药行业 统计年鉴/数据分析
  • 换一换
    首页 微传网 > 资源分类 > DOC文档下载
     

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

    • 资源ID:1689       资源大小:74.50KB        全文页数:4页
    • 资源格式: DOC        下载权限:游客/注册会员/VIP会员    下载费用:10金币 【人民币10元】
    快捷注册下载 游客一键下载
    会员登录下载
    三方登录下载: 微信登录 微信开放平台登录 QQ登录  
    下载资源需要10金币 【人民币10元】   |   1元文档测试下载
    邮箱/手机:
    温馨提示:
    支付成功后,系统会自动生成账号(用户名和密码都是您填写的邮箱或者手机号),方便下次登录下载和查询订单;
    支付方式: 支付宝    微信支付   
    验证码:   换一换

    加入VIP,免费下载
     
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,既可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰   

    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.

    注意事项

    本文(AngularJS自定义指令的开发及应用.doc)为本站会员(admin)主动上传,微传网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知微传网(发送邮件至changjinlai@126.com或直接QQ联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    微传网是一个办公文档、学习资料下载的在线文档分享平台!

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

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

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

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

    收起
    展开