AngularJS(二)——认识AngularJS的指令系统

The first girlfriend – AngularJS

前言:

女神的华丽长袍

---

指令系统:

前言：

• Big-man需要仔细的解释一下什么为指令系统? 指令系统是在计算机组成原理中的概念, 所以这里Big-man需要解释两个方面的指令系统，一是在计算机组成原理中， 另一个是在AngularJS中, 结合这两个来进行对比理解指令系统。

---

计算机组成原理指令系统:

• 基本知识点:
  
  • 指令系统和指令的基本概念，指令格式，指令操作码扩展技术，各种寻址方式及其特点，RISC 和 CISC。
    
    • 指令系统的特点。
    • 重 点：指令格式，指令操作码扩展技术，各种寻址方式及其特点。
    • 难 点：指令格式，指令操作码扩展技术，各种寻址方式及其特点。
    • 指令系统的基本概念：
    • 一条指令就是机器语言的一个语句，它是一组有意义的二进制代码，实际上每条指令的各个部分都可以看作是单个二进制数字，将这些二进制数字拼在一起就形成了指令。把指令的数字形式称为机器语言，这样的指令序列叫做机器代码。指令的基本格式如下：
    • [操作码 | 地址码]:
    • 其中操作码指明了指令的操作性质及功能，地址码则给出了操作数的地址。
    • 指令长度:
    • 指令的长度是指一条指令中所包含的二进制代码的位数，它取决于操作码字段的长度、操作数地址的个数及长度。指令长度与机器字长没有固定的关系，可以等于机器字长，也可以大于或小于机器字长。通常，把指令长度等于机器字长的指令称为单字长指令，指令长度等于半个机器字长的指令称为半字长指令，指令长度等于两个机器字长的指令称为双字长指令。
    • 在一个指令系统中，若所有指令的长度固定，则称为定长指令结构。若各种指令的长度随指令功能而异，则称为变长指令结构。定长指令结构系统控制简单，但不够灵活，变长结构指令系统灵活但控制较复杂。

---

AngularJSng模块中的directive组件

ngApp

• 定义和用法：
  
  • ng-app指令用于告诉AngularJS应用当前这个元素是根元素。
  • 所有AngularJS应用都必须要有一个根元素。
  • HTML文档中只允许有一个ng-app指令，如果有多个ng-app指令，则只有第一个会被使用。
• 语法:

<element ng-app="modulename">
...
 在 ng-app      根元素上的内容可以包含 AngularJS 代码
...
</element>

• 参数值:
  
  • modulename: 可选。指定加载应用模块的名称。

ngBind:

• 定义和用法:
  
  • ng-bind指令告诉AngularJS使用给定的变量或表达式的值来替换HTML元素的内容。
  • 如果给定的变量或表达式修改了，指定替换的HTML元素也会修改。
• 语法:

<element ng-bind="expression"></element>

• 或者作为CSS类:

<element class="ng-bind: expression"></element>

• 所有的HTML元素都支持该指令。
• 参数值:
  
  • expression : 指定要执行的变量或者表达式。

ngBindHtml

• 定义和用法:
  
  • ng-bind-html指令是通过一个安全的方式绑定到HTML元素上。
  • 当你想让AngularJS在你的应用中写入HTML, 你就需要去检测一些危险代码。通过在应用中引入”angularjs-santize,js”模块，使用ngSanitize函数来检测代码的安全性。in your application you can do so by running the HTML code through the ngSanitize function.
• 语法:

<element ng-bind-html="expression"></element>

• 所有的HTML元素都支持该指令。
• 参数值:
  
  • expression : 指定要执行的变量或者表达式。

ngBindTemplate

• 定义和用法:
  
  • ng-bind-html指令用于告诉AngularJS将给定表达式的值替换HTML元素的内容。
  • 当你想在HTML元素上绑定多个表达式时可以使用ng-bind-template指令。
• 语法:
  
  • <element ng-bind-template="expression"></element>
• 参数值expression:
  
  • 一个或者多个要执行的表达式，每个使用{{ }}包含。

ngBlur

• 定义和用法:
  
  • ng-blur指令用于告诉AngularJS HTML元素失去焦点时需要执行的表达式。
  • Angular JS中的ng-blur指令不会覆盖原生的onblur事件，如果触发该事件，ng-blur表达式与原生的onblur事件都会执行。
• 语法:

<element ng-blur="expression"></element>

• <a>,<input>, <textarea>, <select>等窗口标签。
• 参数值:
  
  • expression : 元素标签失去焦点时触发的表达式。

ng-change

• 定义和用法:
  
  • ng-change指令用于告诉AngularJS在HTML元素值改变时需要执行的操作。
  • ng-change指令需要搭配ng-modle指令进行使用。
  • AngularJS ng-change指令不会覆盖原生的onchange事件，如果触发该事件，ng-change表达式与原生的onchange事件都会执行。
  • onchange事件在值的每次改变是触发，它不需要等待一个完整的修改过程，或者等待失去焦点的动作。
  • onchange事件只针对输入框值得真实修改，而不是通过JavaScript来修改。
• 语法:

<element ng-change="expression"></element>

• input, <select>和<textarea>元素支持。
• 参数值:
• expression: 元素值改变时执行表达式。

ng-check

• 定义和用法:
  
  • ng-checked指令用于设置复选框(checkbox)或者单选按钮(radio)的checked属性。
  • 如果ng-checked属性返回true, 复选框(checkbox)或者单选按钮(radio)将会被选中。
• 语法:

<input type="checkbox|radio" ng-checked="expression" />

• type为checkbox或者radio的<input>元素支持。
• 参数值:
  
  • expression: 如果返回true,将会选中元素选项。

ng-class

• 定义和用法
  
  • ng-class指令用于给HTML元素动态绑定一个或或者多个CSS类。
  • ng-class指令的值可以是字符串、对象、或者一个数组。
  • 如果是字符串，多个类名使用空格分隔。
  • 如果是对象，需要使用key-value对，key是一个布尔值，value为你想要添加的类名。只要在key为true的时候类才会被添加。
  • 如果是数组，可以由字符串或者对象组合组成，数组的元素可以是字符串或者对象。
• 语法:

<element ng-class="expression"></element>

• 支持所有的HTML标签元素。
• 参数值:
  
  • expression : 表达式返回一个或者多个类名。

---

JackDan9 Thinking.
JackDan9 – girlfriend beauty.