AngularJS - 指令入門

時間 2019-11-20

標籤 angularjs 指令入門欄目 AngularJS 简体版

原文原文鏈接

指令，我將其理解爲AngularJS操做HTML element的一種途徑。
因爲學習AngularJS的第一步就是寫內置指令ng-app以指出該節點是應用的根節點，因此指令早已不陌生。

html

這篇日誌簡單記錄了一些內置指令，先使用起來，再談一些有趣的東西。
git

內置指令

全部的內置指令的前綴都爲ng，不建議自定義指令使用該前綴，以避免衝突。
首先從一些常見的內置指令開始。
先列出一些關鍵的內置指令，順便簡單說說做用域的問題。
angularjs

ng-model

將表單控件和當前做用域的屬性進行綁定，這麼解釋彷佛也不太正確。
但先不要管咬文嚼字，用起來卻是易懂，例如:github

<input type="text" ng-model="someModel.someProperty" /><br>
{{someModel.someProperty}}

ng-init

該指令被調用時會初始化內部做用域。
這個指令通常會出如今比較小的應用中，好比給個demo什麼的... app

<div ng-init="job='fighter'">
    I'm a/an {{job}}
</div>

除了ng-init，咱們還有更多更好的選擇。ide

ng-app

每一次用AngularJS都離不開這個指令，順便說下$rootScope。
聲明瞭ng-app的元素會成爲$rootScope的起點，而$rootScope是做用域鏈的根，一般聲明在<html>你懂的。
也就是說根下的做用域均可以訪問它。
可是，不建議過分使用$rootScope，省得全局變量滿天飛，效率又差又難管。
下面是一個例子:學習

<html ng-app="myApp">
<body>
    {{ someProperty }}
</body>
<script>
var myApp = angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.someProperty = 'hello computer';
}); 
</script>
</html>

ng-controller

咱們用這個指令在一個DOM元素上裝上controller。
一個控制器? 確實，從字面意思上這樣理解卻是不錯，那咱們爲何須要控制器?
記得AngularJS 1.2.x時還能夠這樣定義controller來着...ui

function ohMyController($scope) {
    //...
}

AngularJS 1.3.x中禁止了這種方式，由於這種方式會讓controller滿天飛，分不清層次，全部東西都掛在$rootScope上...
ng-controller必須有一個表達式做爲參數，另外經過$scope來繼承上級$scope的方法和屬性什麼的，$rootScope也包括在內。
下面只是一個簡單的例子，ancestor沒法訪問child的做用域。 google

<div ng-controller="AncestorController">
    {{ ancestorName }}
    {{ childName }}
    <div ng-controller="ChildController">
        {{ ancestorName }}
        {{ childName }}
    </div>
</div>
<script>
var myApp = angular.module('myApp', [])
.controller('ChildController', function($scope) {
    $scope.childName = 'child';
})
.controller('AncestorController', function($scope) {
    $scope.ancestorName = 'ancestor';
});
</script>

做用域的問題遠不止如此，暫且擱下，繼續看看其餘內置指令。日誌

ng-form

起初不明白爲何會有個表單指令，<form>標籤感受也夠用啊。
以表單驗證爲例，在上一篇http://www.cnblogs.com/Kavlez/p/angularjsformvalidation.html中有這麼一段代碼:

<input type="submit" ng-disabled="mainForm.$invalid" />

也就是表單的狀態爲$invalid時禁用提交按鈕。
若是場景再稍微複雜一點點，好比一個父表單中有多個子表單，子表單中有3個驗證經過時父表單即可以提交。
可是，<form>是不能夠嵌套的。
考慮到這種場景，咱們便使用ng-form指令來解決這一問題。
例如:

<form name="mainForm" novalidate>
    <div ng-form="form1">
        姓名:<input type="text" ng-required="true" ng-model="name"/><br>
        證件號碼:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>
    </div>
    <br>
    <div ng-form="form2">
        監護人姓名:<input type="text" ng-required="true" ng-model="gname"/><br>
        監護人證件號碼:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>
    </div>
    <button ng-disabled="form1.$invalid && form2.$invalid">submit all</button>
</form>

ng-disabled

像這種只要出現則生效的屬性，咱們能夠在AngularJS中經過表達式返回值true/false令其生效。
禁用表單輸入字段。

<textarea ng-disabled="1+1==2">1+1=?</textarea>

ng-readonly

經過表達式返回值true/false將表單輸入字段設爲只讀。
弄個例子，3秒後變成只讀.

<input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/>

.run(function($rootScope,$timeout){
    $rootScope.stopTheWorld=false;
    $timeout(function(){
        $rootScope.stopTheWorld = true;
    },3000)
})

ng-checked

這個是給<input type="checkbox" />用的，好比...

<input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">

ng-selected

給<select>裏面的<option>用的，例子:

<label>
    <input type="checkbox" ng-model="isFullStack">
    I'm Full Stack Engineer
</label>
<select>
    <option>Front-End</option>
    <option>Back-End</option>
    <option ng-selected="isFullStack">Full Stack !!!</option>
</select>

ng-show/ng-hide

根據表達式顯示/隱藏HTML元素，注意是隱藏，不是從DOM移除，例如:

<div ng-show="1+1 == 2">
    1+1=2
</div>
<div ng-hide="1+1 == 3">
    you can't see me.
</div>

ng-change

不是HTML那套onXXX之類的，而是ng-XXX。
結合ng-model使用，以ng-change爲例:

<input type="text" ng-model="calc.arg"  ng-change="calc.result = calc.arg*2" />
    <code>{{ calc.result }}</code>

或者好比ng-options

{{}}

其實這個也是一個指令，也許以爲和ng-bind差很少，但頁面渲染略慢時可能會被看到。
另外，{{}}的performance遠不如ng-bind，只是用起來很方便。

ng-bind

ng-bind的行爲和{{}}差很少，只是咱們能夠用這個指令來避免FOUC(Flash Of Unrendered Content)，也就是未渲染致使的閃爍。

ng-cloak

ng-cloak也能夠爲咱們解決FOUC。 ng-cloak會將內部元素隱藏，直到路由調用對應的頁面。

ng-if

若是ng-if中的表達式爲false，則對應的元素整個會從DOM中移除而非隱藏，但審查元素時你能夠看到表達式變成註釋了。
若是相進行隱藏，可使用ng-hide。

<div ng-if="1+1===3">
    沒法審查到該元素
</div>
<div ng-hide="1+1==2">
    可審查
</div>

ng-switch

單獨使用沒什麼意思，下面是例子:

<div ng-switch on="1+1">
    <p ng-switch-default>0</p>
    <p ng-switch-when="1">1</p>
    <p ng-switch-when="2">2</p>
    <p ng-switch-when="3">3</p>
</div>

ng-repeat

不明白爲毛不叫iterate，總之是遍歷集合，給每一個元素生成模板實例，每一個實例的做用域中能夠用一些特殊屬性，以下:

$index
$first
$last
$middle
even
odd

不用特意解釋，這些都很容易看出來是幹什麼的，下面是一個例子:

<ul>
    <li ng-repeat="char in 
    [{'alphabet': 'K'},
    {'alphabet': 'A'},
    {'alphabet': 'V'},
    {'alphabet': 'L'},
    {'alphabet': 'E'},
    {'alphabet': 'Z'}] " ng-show="$even">{{char.alphabet}}</li>
</ul>

ng-href

起初我在一個文本域中弄了個ng-model，而後像這樣<a href="{{myUrl}}">在href裏面寫了進去。
其實這樣href和ng-href看不出什麼區別，因此咱們能夠試試這樣:

<ul ng-init="myHref=''">
    <li><a ng-href="{{ myHref }}">{{linkText}}</a></li>
    <li><a href="{{ myHref }}">能夠點擊，但不必定是正確的地址</a></li>
</ul>

.run(function($rootScope, $timeout) {
    $rootScope.linkText = '還沒有加載，您沒法點擊';
    $timeout(function() {
        $rootScope.linkText = '請點擊'
        $rootScope.myHref = 'http://google.com';
    }, 2000);
})

ng-src

大同小異，即表達式生效前不要加載該資源。
例子(ps: 圖片不錯! ):

<img ng-src="{{imgSrc}}"/>

.run(function($rootScope, $timeout) {
    $timeout(function() {
        $rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
    }, 2000);
})

ng-class

用做用域中的對象動態改變類樣式，例如:

<style>
    .red {background-color: red;}
    .blue {background-color: blue;}
</style>

<div ng-controller="CurTimeController">
    <button ng-click="getCurrentSecond()" >Get Time!</button>
    <p ng-class="{red: x%2==0,blue: x%2!=0}" >Number is: {{ x }}</p>
</div>

.controller('CurTimeController', function($scope) {
    $scope.getCurrentSecond = function() {
        $scope.x = new Date().getSeconds();
    };
})

相關標籤/搜索

每日一句

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