AngularJS 指令詳解

時間 2019-12-07

原文原文鏈接

AngularJS 指令詳解css

ng-app 指令html

ng-app指令用於指定angularJS應用當前元素爲根元素java

因此AngularJS應用都必需要有一個根元素express

並且HTML文檔中只容許出線一個ng-app指令，若是出現多個ng-app指令，則只有第一個會被使用。數組

<body ng-app="">
</body>

ng-bind指令安全

ng-bind 指令告訴AngularJS使用給定的變量或者表達式的值來替換HTML元素的內容，若是給定的變量或者表達式的值修改了，對應的HTML元素也會修改。全部的HTML元素都支持該指令。app

<element ng-bind=」expression」 />ide

或者函數

<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函數來檢測代碼的安全性。

 <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指令

  <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>元素

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將會被選中；

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時纔會被添加。

若是是數組，數組元素能夠是字符串或者對象。

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元素

做爲css類使用

<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屬性的值能夠是一個表達式，返回一個文件名。默認狀況下須要包含在同一個域名下的文件。

或者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指令

綁定數據觸發的時間，或者指定等待時間（毫秒）

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元素或其子元素不須要編譯。

<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}}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。