1.指令
ng-app,ng- 都是angular的指令系統
ng-app: ng-app是angular的初始化，一個頁面只能有一個ng-app,位置不限制。在頁面上加入了這個執行，那么從當前的元素以及兒子元素，都交給angular管理，不賦值的話，會有一個默認模塊。
ng-app="myApp"這里如果加了自定義的名字，那么必須創建對應的模塊。
ng-model:雙向綁定數據
ng-init：給字段賦予初始值。ng-init=”val=0”。
ng-bind:單向綁定，只能用於雙標簽，如果要在單標簽上使用，那么我們就使用表達式，表達式有一個閃爍的問題，它渲染在html的雙標簽位置。與{{}}的作用一樣顯示數據。
寫法有：ng-bind data-ng-bind x-ng-bind
{{表達式}}：用於顯示數據。
一次性數據綁定：{{::表達式}}
ng-controller控制器，鏈接數據的的橋梁
ng-bind
ng-cloak
ng-bind-template
ng-bind-html
http://www.bootcdn.cn/angular.js/
不同於以上的功能性指令，Angular還定義了一些用於和事件綁定的指令：
- ng-blur：失去焦點
- ng-change：發生改變
- ng-copy： 拷貝完成
- ng-click：單擊
- ng-dblclick：雙擊
- ng-focus： 得到焦點
- ng-submit：
ng-click/dblclick
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit
2.指令閃爍 ng-cloak
解決表達式閃爍的問題
1. Class=”ng-cloak”
2.在對應的標簽中加上 ng-cloak指令即可。
雖然ng-bind 能解決 {{}} 閃現的問題，但是 ng-bind不能用單標簽 ng-bind 只能用於雙標簽，在單標簽上是無法解決
在單標簽上，為了解決閃現表達的可以使用 ng-cloak,也可以在表標簽上加上 class="ng-cloak"
<input type="text" ng-model="name" ng-cloak/>
3.ng-class ng-class-even ng-class-odd
ng-class 實現多個選擇多個 {"red":true,"font":true}
如果值為True表示可用，否則false 不可以用
ng-class {"A":red,"B":green}[A] 多選擇一個樣式
<li ng-repeat="x in data" ng-class='{a:"blue",b:"green",c:"pink"}[x.main]'>{{x.title}}</li>
$scope.data=[ {title:"標題", main:"a"}, {title:"標題1", main:"b"}, {title:"標題2", main:"c"} ];
4.ng-repeat 指令
js控制器里定義一個data數據：
angular.module("myApp",[]).controller("testContoller",function($scope){
$scope.data=[
{title:"標題", main:"主要內容"},
{title:"標題1", main:"主要內容1"},
{title:"標題2", main:"主要內容2"}
]
});
第一種使用：
<p ng-repeat="a in data" ng-cloak>{{a.title}},{{a.main}}</p>
第二種使用：
如果使用ng-repeat-start那么必須要結合ng-repeat-end
<div ng-repeat-start="o in data"></div>
<p ng-cloak>{{o.title}}</p>
<div ng-repeat-end=""></div>
<ul>
<li ng-repeat="obj in data" ng-class="$even==true?'pink':obj.color " >{{obj.name}}</li>
</ul>
$even：奇數行$even的值為true，偶數行為false;
$odd：奇數行$odd的值為false，偶數行為true;
5.ng-show ng-hide
ng-show ：默認值是隱藏;布爾值為true時顯示
ng-hide:默認值是顯示；布爾值為true時隱藏
<div ng-show>測試盒子</div>
6.ng-if
ng-if:值為true的時候顯示，為false時該元素及其所有子元素被移除；默認為false。
<div ng-if="true">測試盒子</div> <p ng-if="false"> 2222 <span>11111</span> </p>
7.ng-switch
<!--當data.name為1時，第一個span顯示，當輸入的data.name為2時第二個span顯示-->
<div ng-switch="data.name"> <input type="text" ng-model="data.name"/><br/> <span ng-switch-when="1">{{data.names}}</span> <span ng-switch-when="2">{{data.namess}}</span> </div> $scope.data={ name:"", names:"張三", namess:"小明" }
8.ng-checked
9.ng-include
語法
<element ng-include="filename" onload="expression" autoscroll="expression" ></element> ng-include 指令作為元素使用: <ng-include src="filename" onload="expression" autoscroll="expression" ></ng-include>
所有的 HTML 元素都支持該指令。
參數值
| 值 |
描述 |
| filename |
文件名，可以使用表達式來返回文件名。 |
| onload |
可選， 文件載入后執行的表達式。 |
| autoscroll |
可選，包含的部分是否在指定視圖上可滾動。 |
10.ng-copy
元素文本被拷貝時執行的表達式。
<element ng-copy="expression"></element>