AngularJS 指令详解
ng-app 指令
ng-app指令用于指定angularJS应用当前元素为根元素
所以AngularJS应用都必须要有一个根元素
而且HTML文档中只允许出线一个ng-app指令，如果出现多个ng-app指令，则只有第一个会被使用。
<body ng-app=""> </body>
ng-bind指令
ng-bind 指令告诉AngularJS使用给定的变量或者表达式的值来替换HTML元素的内容，如果给定的变量或者表达式的值修改了，对应的HTML元素也会修改。所有的HTML元素都支持该指令。
<element ng-bind=”expression” />
或者
<element class=”ng-bind:expression” />
1 <div ng-app="" ng-init="myText='Hello World!'"> 2 <p ng-bind="myText"></p> 3 </div>
ng-bind-html 指令
ng-bind-html指令是通过一个安全的方式将编辑的html内容绑定到html元素上。
当你想通过AngularJS在你的应用中写入html，需要检测一些危险的代码，通过“angular-santize.js”模块，使用ngSanitize函数来检测代码的安全性。
<element ng-bind-html=”expression” />
<p ng-bind-html="myText"></p> $scope.myText = "My name is: <h1>Tom</h1>";
ng-bind-template指令
ng-bind-template指令用于将指定表达式的内容替换为HTML元素内容，当你想在html元素上绑定多个表达式时可以使用ng-bind-template指令
<element ng-bind-template = “expression” />
<div ng-init="name='张三';age='18'" ng-bind-template="我是{{name}}，今年{{age}}岁"></div>
ng-blur指令
ng-blur指令在元素失去焦点时执行表达式，ng-blur指令不会覆盖原生的onblur事件，如果触发该事件，ng-blur表达式和原生的onblur时间都会执行。
支持对象：<a> <input> <select> <textarea>,窗口对象
1 <button ng-init="count=0" ng-blur="count=count+1" onblur="alert('不好意思我只是执行了onblur事件！')">我是onblur的事件元素 <span>{{count}}</span></button>
ng-change指令
ng-change指令在html元素改变时执行，ng-change指令需要搭配ng-model指令一起使用，ng-change不会覆盖原生的onchange事件；
ng-change事件在值每次修改时触发，不需要等待完成的过程，或者等待失去焦点的过程。
ng-change事件只针对输入框值得真实修改，而不是通过javaScript来修改的。
支持对象：<input> <select> <textarea>元素
<element ng-change=”expression” />
1 <input type="text" ng-change="Change()" ng-model="myvalue" /> 2 change事件执行次数：{{changeCount}} 3 4 $scope.changeCount = 0; 5 $scope.Change = function () { 6 $scope.changeCount++; 7 }
ng-checked 指令
ng-check指令用于设置复选框和单选按钮的checked属性，
如果ng-checked属性返回true，复选框checkbox或单选按钮radio将会被选中；
<input type=”checkbox|radio” ng-checked=”expression” />
1 <div> 2 <p>汽车品牌(复选)</p> 3 <input type="checkbox" ng-model="carCheck" />全选 4 <input type="checkbox" ng-checked="carCheck">福特 5 <input type="checkbox" ng-checked="carCheck">雪佛兰 6 <input type="checkbox" ng-checked="carCheck">一汽 7 <input type="checkbox" ng-checked="carCheck">广汽本田 8 <p>点击全选 选择全部品牌</p> 9 </div>
ng-class指令
ng-class指令用于给html元素动态绑定一个或者多个CSS类。
ng-class 的值可以是字符串，对象或者一个数组。
如果是字符串，多个类名之间使用空格分开。
如果是对象需要使用key-value对，key为类名，value是一个布尔值只有value=true时才会被添加。
如果是数组，数组元素可以是字符串或者对象。
<element ng-class=”expression” />
expression 返回一个或多个类名
<style> .sky { background-color: lightblue; } .tomato { background-color: coral; } </style> <div> <p>请选择一个样式</p> <select ng-model="home"> <option>sky</option> <option>tomato</option> </select> <div ng-class="home"> <h1>Welcome home</h1> <p>这是ng-clas指令示例</p> </div> </div>
<style> .sky { background-color: lightblue; } .tomato { background-color: coral; } </style> <div class="frame"> <p>请选择一个样式</p> <select ng-model="home"> <option>sky</option> <option>tomato</option> </select> <div ng-class="home"> <h1>Welcome home</h1> <p>这是ng-clas指令示例</p> </div> </div>
ng-class-even指令
ng-class-even指令为html动态绑定一个或多个css，但是只作用于偶数行。
ng-class-even 指令需要搭配ng-repeat指令使用。
ng-class-even 指令建议使用在表格的样式渲染中，其他所有的html元素都是支持的。
ng-class-odd指令
ng-class-odd指令为html动态绑定一个或多个css，但是只作用于奇数行。
ng-class-odd 指令需要搭配ng-repeat指令使用。
ng-class-odd 指令建议使用在表格的样式渲染中，其他所有的html元素都是支持的。
ng-repeat指令
用于循环输出指定HTML元素，集合必须是数组或对象。
<div ng-init="records=['记录1','记录2','记录3','记录4']">
<h3 ng-repeat="x in records">{{x}}</h3>
</div>
1 <style> 2 .sky { 3 background-color: lightblue; 4 } 5 6 .tomato { 7 background-color: coral; 8 } 9 10 .even { 11 color: red; 12 } 13 14 .odd { 15 color: aqua; 16 } 17 </style> 18 19 <div> 20 <table> 21 <tr> 22 <td>姓名</td> 23 <td>联系电话</td> 24 </tr> 25 <tr ng-repeat="x in records" ng-class-even="'even tomato'" ng-class-odd="'odd'"> 26 <td>{{x.name}}</td> 27 <td>{{x.tel}}</td> 28 </tr> 29 </table> 30 </div> 31 32 $scope.records = [{ 33 "name": "张三", 34 "tel": "18515151515" 35 }, { 36 "name": "李四", 37 "tel": "18515151511" 38 }, { 39 "name": "王五", 40 "tel": "18515151512" 41 } ];
ng-click指令
元素执行单击事件触发表达式
我被点击{{clickCount}}次<input type="button" ng-click="clickCount=clickCount+1" value="你点击我试试" />
ng-controller指令
ng-controller指令用于为应用程序添加控制器
在控制器中可以添加代码，添加函数和变量，并使用scope对象来访问。
<div ng-app="myApp" ng-controller="myCtrl"> </div> var app = angular.module("myApp", ); app.controller("myCtrl", function ($scope) { //逻辑代码 }
ng-csp指令
ng-csp指令用于修改AngularJS的安全策略。
如果使用了ng-csp指令，AngularJS将不会执行eval函数，这样就无法注入内联样式。
设置ng-csp指令为no-unsafe-eval,将阻止AngularJS执行eval函数，但允许注入内联样式。
设置ng-csp指令为no-inline-style，将阻止AngularJS注入内联样式，但允许执行eval函数。
备注：ng-csp指令不会影响javaScript，但会修改angularJS的工作方式；
ng-cut指令
剪切时执行
<input ng-cut="cutcount=cutcount+1" ng-init="cutcount=0" value="剪切这个文本" /> 文本被剪切了{{cutcount}}次
ng-copy指令
复制时执行
<input ng-copy="copycount=copycount+1" ng-init="copycount=0" value="复制这个文本" />文本被复制了{{copycount}}次
Ng-paste指令
<input ng-paste="pastecount=pastecount+1" ng-init="pastecount=0" value="在这粘贴" /> 文本被粘贴了{{pastecount}}次
ng-dblclick指令
双击时执行
<input ng-dblclick="dblcount=dblcount+1" ng-init="dblcount=0" value="双击我" type="text" /> 双击了{{dblcount}}次
ng-disabled 指令
禁用/启用 元素
<input type="checkbox" ng-model="allDisable" />是否禁用 <input type="text" ng-disabled="allDisable" /> <input type="radio" ng-disabled="allDisable" />
ng-focus指令
获取焦点后执行表达式
<input type="text" ng-focus="focusCount =focusCount+1" /> 获取焦点次数{{focusCount}}
ng-hide指令
ng-hide 指令在表达式为true时隐藏html元素
<element ng-hide=”expression” />
作为css类使用
<element class=”ng-hide” />
<div class="frame"> 隐藏html<input type="checkbox" ng-model="myHide"> <div class="ng-hide">我是隐藏class</div> <div ng-hide="myHide"> <h1>Welcome</h1> </div> </div>
ng-href指令
ng-href指令覆盖了原生<a>元素的href属性。
<a ng-init="nghref='http://www.baidu.com'" href="http://www.sina.com" ng-href="{{nghref}}">前往百度</a><br />
ng-if 指令用于在表达式为false时候移除html元素，如果为true会添加被移除的元素并显示。
ng-if不同于ng-hide指令，ng-hide是隐藏元素而ng-if是从DOM中移除元素。
<div >
<label><input type="checkbox" ng-model="myif" />选择我可以删除或添加元素</label>
<div ng-if="myif">
<H1>Hello 我是ng-if指令</H1>
</div>
</div>
ng-include指令
用于指定包含外部的HTML文件，包含的内容作为指定元素的子节点，ng-include属性的值可以是一个表达式，返回一个文件名。默认情况下需要包含在同一个域名下的文件。
<element ng-include=”filename” onload=”expression” autoscroll=”expression” />
或者ng-include指令作为元素使用
<ng-include src=”filename” onload=”expression” autoscroll=”expression”> </ng-include>
ng-init指令
ng-init指令初始化执行给定的表达式。
<div ng-init="initCount=100">我是initCount：{{initCount}}</div>
ng-keydown指令
表示在指定HTML元素上按下按键时需要的操作，不会覆盖原生的onkeydown事件。
<input ng-keydown="keydownCount =keydownCount+1" ng-init="keydownCount=0" /> keydown执行次数{{keydownCount}}
ng-keypress指令
表示在指定HTML元素上按下按键时需要的操作，不会覆盖原生的onkeypress事件。
<input ng-keypress="keypressCount =keypressCount+1" ng-init="keypressCount=0" />keypress执行次数{{keypressCount}}
ng-keyup指令
表示在指定HTML元素上松开按键时需要的操作，不会覆盖原生的onkeyup事件。
<input ng-keyup="keyupCount =keyupCount+1" ng-init="keyupCount=0" />keyup执行次数{{keyupCount}}
按键敲击事件顺序：1.keydown 2.keypress 3.keyup
ng-list指令
ng-list指令将字符串转换为数组，并使用都好分隔开。
<input> <select> <textarea>和其他可编辑指令都支持
<input ng-model="list" ng-list />{{list}}
ng-model指令
ng-model指令绑定了HTML元素到scope变量中，如果在scope中不存在该变量，则创建该变量。
绑定变量值
<body ng-app="myApp" ng-controller="myCtrl"> <!--ng-model指令 绑定变量--> <div class="frame"> 姓名：<input ng-model="name" /> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope) { $scope.name = "张三"; }); </script> </body>
双向数据绑定
<body ng-app="myApp" ng-controller="myCtrl"> <!--双向绑定--> <div class="frame"> 姓名：<input ng-model="name" /> <h1>你输入的内容是：{{name}}</h1> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function ($scope) { $scope.name = "张三"; }); </script> </body>
Ng-model-option指令
绑定数据触发的时间，或者指定等待时间（毫秒）
<element ng-model-option=”option”>
Option : 绑定规则如下：
{updateOn:’event’}规则指定事件发生后绑定数据
{debounce:1000}等待多少毫秒后绑定数据
{allowInvalid:true|false}是否需要验证后绑定数据
{getterSetter:true|false}规定是否作为getters/setters绑定模型
{timezone:’0100’}规则是否使用时区
<input ng-model="modelname1" />{{modelname1}} <input ng-model="modelname2" ng-model-options="updateOn:'blur',debounce:1000}" />{{modelname2}}
ng-mousedown指令
鼠标按下时要执行的操作，不会覆盖元素的onmousedown事件。
<input ng-mousedown="mousedownCount=mousedownCount+1" ng-init="mousedownCount=0" />Mousedown执行次数{{mousedownCount}}
ng-mouseup指令
鼠标松开时执行的操作，不会覆盖元素的onmouseup事件
<input ng-mouseup="mouseupCount=mouseupCount+1" ng-init="mouseupCount=0" />mouseup执行次数{{mouseupCount}}
事件执行顺序：1.mousedown 2.mouseup 3.click
ng-mouseenter指令
鼠标在HTML元素穿过时执行的操作，不会覆盖onmouseenter事件
<input ng-mouseenter="mouseenterCount=mouseenterCount+1" ng-init="mouseenterCount=0" />mouseenter执行次数{{mouseenterCount}}
ng-mouseleave指令
鼠标从HTML元素上移开时要执行的操作，不会覆盖onmouseleave事件。
<input ng-mouseleave="mouseleaveCount=mouseleaveCount+1" ng-init="mouseleaveCount=0" />mouseleave执行次数{{mouseleaveCount}}
ng-mousemove指令
鼠标在HTML元素上移动时要执行的操作，不会覆盖onmousemove事件。
<input ng-mousemove="mousemoveCount=mousemoveCount+1" ng-init="mousemoveCount=0" />mousemove执行次数{{mousemoveCount}}
ng-mouseover指令
鼠标移动到指定HTML元素上要执行的操作，不会覆盖onmouseover事件。
<input ng-mouseover="mouseoverCount=mouseoverCount+1" ng-init="mouseoverCount=0" />Mouseover执行次数{{mouseoverCount}}
ng-non-bindable指令
用于告诉AngularJS当前的HTML元素或其子元素不需要编译。
<element ng-non-bindable> </element>
<p ng-non-bindable>这个代码不需要使用 AngularJS: {{ 5+5 }}</p>
ng-open指令
用于设置details列表的open属性，如果ng-open的表达式返回true则details列表是可见的。
<label><input type="checkbox" ng-model="showDetails" />打开详细列表</label>
<details ng-open="showDetails">
<summary>Details列表标题</summary>
<p>列表内容</p>
</details>
ng-options指令
用于使用<options>填充<select>元素的选项
ng-options 指令用数组来填充下拉列表。
<select ng-init="selectNames = ['张三', '李四', 'tom', 'sam']" ng-model="nn" ng-options="item for item in selectNames"> </select>
ng-src指令
覆盖了<img> 元素的src属性
<img ng-src="img/img1.jpg" />
ng-srcset指令
覆盖了<img>元素的srcset属性
<img ng-srcset="img/img2.jpg" />
ng-style指令
为HTML元素添加style属性，属性值为对象，返回值也是对象，由css中的属性和值组成。
<div ng-init="style1={'height':'100px','background-color':'red','color':'lightblue'}" > <div ng-style="{{style1}}"> 你好我是ng-style指令,红色背景，浅蓝色字体。100px高度 </div> </div>
ng-submit指令
用于在表单提交后执行指定的函数
1 <form ng-submit="MyFunc()"> 2 <input type="text" /> 3 <input type="submit" value="提交" /> 4 {{submitText}} 5 </form> 6 7 $scope.submitText = "未提交"; 8 $scope.MyFunc = function () { 9 $scope.submitText = "已提交"; 10 }
ng-switch指令 ng-switch-when指令 ng-switch-default指令
根据表达式显示或隐藏对应的部分，读音的子元素使用ng-switch-when指令，如果匹配选中显示，其他为匹配的则移除，
可以通过ng-switch-default指令设置默认选项，如果都没有匹配的情况，默认选项会显示。
1 <select ng-model="myselected"> 2 <option value="sina">ww.sina.com</option> 3 <option value="baidu">ww.baidu.com</option> 4 <option value="google">ww.google.com</option> 5 </select> 6 7 <div ng-switch="myselected"> 8 <div ng-switch-when="sina"> 9 <p>欢迎访问新浪</p> 10 </div> 11 <div ng-switch-when="baidu"> 12 <p>欢迎访问百度</p> 13 </div> 14 <div ng-switch-when="google" > 15 <p>欢迎访问谷歌</p> 16 </div> 17 <div ng-switch-default> 18 <p>默认选项</p> 19 </div> 20 </div>
ng-value指令
用于设置input或select元素的value属性
<input ng-value="myval" type="text" />
ng-true-value指令 ng-false-value指令
当我们点击checkbox选中复选框是ng-model的值是true 对应ng-true-value值，取消选择为false 对应ng-false-value值；
<input ng-model="checkboxModel" type="checkbox" ng-true-value="'true 选中'" ng-false-value="'false 没有选中'"> {{checkboxModel}}