指令(Directive)

1、指令概念介绍

--  AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集。

--  在DOM编译期间和HTML关联着的指令会被检测到,并且 会被执行。

--  在AngularJS中间前缀ng- 这种属性称之为指令,其作用就是为DOM元素调用方法、定义行为绑定数据等。

--  简单地说,当一个Angular应用启动,Angular就会遍历DOM树来解析HTML,根据指令不同,完 成不同操作。

--  HTML5允许扩展的(自制的)属性,以data-开头。

--  AngularJS 属性以ng- 开头,但是可以使用data-  ng- 来让网页对HTML5有效。

2、ng-app 指令

--  ng-app指令用来标明一个AngularJS应用程序。

--  标记在一个AngularJS的作用范围的根对象上。

--  系统执行时会自动的执行根对象范围内的其他指令。

--  可以在同一个页面创建多个ng-app 节点。

3、ng-repeat指令

--  ng-repeat指令用来编译一个数组重复创建当前元素,如:

4、ng-class指令

--  ng-class指令可以设置一个键值对,用于决定是否添加一个特定的类名,键为class名,值为bool 类型表示是否添加该类名,如:

5、ng-show、ng-hide指令

--  ng-show、ng-hide指令会根据属性值确定是否展示当前元素,例如ng-show=false则不会展示 该元素

6、ng-if 是指是否存在DOM元素

7、ng-link、ng-src指令

--   ng-link、ng-src指令用于解决当链接类型的数据绑定时造成的加载BUG,如:

8、其他常用指令

--  ng-model

--  ng-click

--  ng-init

angular之指令的更多相关文章

  1. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  2. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  3. Angular学习-指令入门

    1.指令的定义 从用户的角度来看,指令就是在应用的模板中使用的自定义HTML标签.指令可以很简单,也可以很复杂.AngularJS的HTML编译器会解析指令,增强模板的功能.也是组件化未来的发展趋势, ...

  4. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  5. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  6. angular directive指令的复用

    “指令之之所以要定义成指令就是为了复用!” 指令一定是可以用在不同的controller里面的,为了在不同的controller去使用它,我们一定要给指定的配置项一个指令.这样才能跟外面的控制器进行交 ...

  7. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

  8. angular分页指令

    目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-c ...

  9. angular自定义指令详解

    指令(directive)是angular里面最核心也是最难懂的东西,在慕课网看了下大漠穷秋老湿的视频,自己百度半天做了一些小test,总算把一切都搞明白了. 先列出学习来源: 指令中controll ...

  10. Angular之指令Directive系列

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...

随机推荐

  1. hadoop记录-hadoop常用

    1.hdfs目录配额 #设置配额目录hdfs dfsadmin -setSpaceQuota 10T /user/hive/warehouser/tmp查看配额目录信息hdfs dfs -count ...

  2. 隧道6in4 和隧道6to4(GNS3)

    隧道6in4实验配置 拓扑图 Device Interface IP Address(IPv6) R1 F 0/0 10.1.81.1 F 0/1 2001:db8:cafe:81::10 R2 F ...

  3. 五十五、linux 编程——TCP 连接和关闭过程及服务器的并发处理

    55.1 TCP 连接和关闭过程 55.1.1 介绍 建立连接的过程就是三次握手的过程:客户端发送 SYN 报文给服务器,服务器回复 SYN+ACK 报文,客户机再发送 ACK 报文. 关闭连接的过程 ...

  4. Linux关闭You have new mail in /var/spool/mail/root提示

    终端远程登陆Linux后经常提示You have new mail in /var/spool/mail/root 这个提示是LINUX会定时查看LINUX各种状态做汇总,每经过一段时间会把汇总的信息 ...

  5. TP5框架,开源小程序商城源码,前端+后台完整版

    CRMEB微信公众号商城小程序商城数据同步,带积分.优惠券.秒杀.砍价.分销等功能,更是一套方便二次开发的框架 开源地址:https://github.crmeb.net/u/crmeb 商城演示后台 ...

  6. python复习2

    在操作字符串时,我们经常遇到str和bytes的互相转换.为了避免乱码问题,应当始终坚持使用UTF-8编码对str和bytes进行转换.

  7. ViewPager刷新原理

    ViewPager的数据是通过PageAdapter来装载的,刷新数据的方法有以下: 调用adapter.notifyDataSetChanged(); 刷新控件,但是要覆盖PagerAdapter的 ...

  8. webpack4.0学习记录

    2019/04/28 1.本质上,webpack基于node  node跟webpack为最新稳定版,才能更好,更快的打包 安装 1.卸载node  直接在控制面板  卸载 2.安装 从官网下载 然后 ...

  9. 安装版本( 相关关系 Vue SSR 指定版本)

    1. 关于 brew mac包管理器 终端安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebr ...

  10. 也写dateUtil.js

    yl.dateUtil = { /** * y 年 * M 月 * d 日 * H 时 h 时(am/pm) * m 分 * s 秒 * S 毫秒 * a 上午/下午(am/pm) * setInte ...