栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

AngularJS优雅的自定义指令

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

AngularJS优雅的自定义指令

学习要点
 •为什么使用指令
 •创建自定义指令
•使用jqLite工作 

一、为什么使用自定义指令
NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性。

二、自定义指令
接下来,我们来做一个小案例,当鼠标单击加价后,列表项自动递增,当然列表也是通过指令自动添加的,它本就是一个空的div





  Angluar test
  
  
  


  
    
Products
    
    
      
      
    
    
      
      
      
    
  







解析:
第一步:创建控制器,添加数据模型products和递增价格incrementPrices()方法
第二步:自定义unorderlist标签,该标签的作用是:通过作用域数据模型的值,将其值以无序列表的方式展示出来
第三部:并且在单击加价按钮时,无序列表的值会依次递增

三、使用jqLite工作
NG内置了jqLite,它是JQuery的缩小版





  Angluar test
  
  
  


  
    
    
  1. Apples
    • Bananas
    • Cherries
    • Oranges
  2. Pears
  3. Oranges

解析:
第一步:自定义控制器,定义数据模型names
第二步:自定义指令,功能是将使用指令的元素下的所有li找出,并且更加值的不同赋给字体不同的颜色
第三步:在视图中调用并且使用指令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/95782.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号