angularjs指令（directive）中的系統自定義指令學習研究 ...
您好，接著在昨天對簡單指令學習瞭解以後，今天開始學習瞭解angularjs中的系統指令
系統指令大部分都是以ng開始，這也是為什麼在自定義指令命名時不要以ng開始的原因所在
系統指令在學習了分成兩個部分進行學習：基礎指令、在指令中使用子作用域
第一、基礎指令
基礎指令由包括bool型和類bool型兩類
bool型指令，就是其值是一bool值（true or false）
1.1、bool指令包括：
ng-disabled:主要控制控制項是否可操作
ng-readonly:控制文本輸入框為只讀
ng-check:控制選擇框是否被選中
ng-selected：控制下拉框選中項
1.2、類布爾指令包括：
ng-href 指令：與html中的href對應，其好處是當為給其賦值時
ng-src指令：與html中的src對應，表達式生效之前不要載入圖像：
一個簡單的練習：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <div> <h1> ng-disabled指令</h1> <input type="text" ng-disabled="isDisable" placeholder="3s後我才可操作" /> </div> <div> <h1> ng-readonly指令</h1> <input type="text" ng-model="isReadonly" placeholder="只要我不空下麵就不可操作" /> <input type="text" ng-readonly="isReadonly" placeholder="前面不為空我就不可操作啦" /> </div> <div> <h1> ng-check指令</h1> 是否選中王先生<input type="checkbox" ng-model="isSelected" value="是否選中王先生" /> <select> <option>許先生</option> <option ng-selected="isSelected">王先生</option> </select> </div> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope, $timeout) { $scope.isDisable = true; $timeout(function () { ///// 3秒後開啟控制項可操作 $scope.isDisable = false; }, 3000) }); </script>
第二、在指令中使用子作用域
指令中使用子作用域，其簡單的理解就是，其指令會創建一個隔離的作用子域，基礎父作用域。
1、ng-app:DOM元素將被標記為$rootScope的起始點
在JavaScript代碼中通過run方法來訪問$rootScope。
2、ng-controller:控制器，創建一個子域
3、ng-include :其實現功能效果就是，模塊化載入外部的模塊
使用註意要點：
a.ng-include,如果單純指定地址，必須要加引號
b.ng-include,載入外部html，script標簽中的內容不執行，不能載入，如果需要控制器處理需要在主頁中註冊
c.ng-include,載入外部html中含有style標簽樣式可以識別
d. ng-inclue,記載外部html中的link標簽可以載入
使用距離：
<div ng-include="/myTemplateName.html"
ng-controller="MyController"
ng-init="name = 'World'">
Hello {{ name }} </div>
4、ng-switch ：根據條件選擇性的載入
格式為：ng-switch on="名稱"
ng-switch-default:預設處理
ng-switch-when='具體的值'
來一個練習：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <div> <h1> ng-switch指令</h1> <select ng-model="selectValue"> <option value="">請選擇</option> <option value="xu">許先生</option> <option value="wang">王先生</option> </select> <div ng-switch on="selectValue"> <div ng-switch-default>請先選擇</div> <div ng-switch-when="xu">你選擇的許先生</div> <div ng-switch-when="wang">你選擇的王先生</div> </div> </div> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); </script>
5、ng-if ：根據條件選擇性的是否載入
ng-if和ng-show、ng-hide都能夠實現標簽的顯示隱藏
但是其有本質的區別，ng-if是直接不載入，而後者是通過css樣式控制
代碼實例：
<div>
<h1> ng-if指令</h1>
是否顯示<input type="checkbox" ng-model="isShow" />
<div ng-if="isShow">
需要顯示還是隱藏我，你們自己控制吧！
</div>
</div>
6、ng-repeat:迴圈遍歷一個集合數據，根據模板生成數據列
幾個關鍵屬性值：
$index：遍歷的進度（0...length-1）
$first：當元素是遍歷的第一個時值為true
$middle：當元素處於第一個和後元素之間時值為true
$last：當元素是遍歷的後一個時值為true
$even：當$index值是偶數時值為true
$odd：當$index值是奇數時值為true
ng-repeat在數據列表顯示中用的比較多，在實際使用中可以根據其關鍵字進行樣式設置展示
特別說明：集合數據的開始坐標是0，所以在處理奇偶數時要註意
來一個練習：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <style type="text/css"> .even { background-color: #b6ff00; } .odd { background-color: #808080; } </style> <div> <h1>ng-repeat指令</h1> <div ng-repeat="user in uesrList"> <div style="width:400px;height:40px;line-height:40px;" ng-class="even:!$even;odd:!odd">您好{{user.name}}</div> </div> <div> 姓名：<input type="text" ng-model="addName" placeholder="請輸入新增的姓名" /><br /> <input type="button" ng-disabled="!addName" value="新增" ng-click="addNewName()" /> </div> </div> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope, $timeout) { $scope.addName = ""; $scope.uesrList = [{ name: "許先生" }, { name: "趙先生" }, { name: "劉先生" },] $scope.addNewName = function () { $scope.uesrList.push({ name: $scope.addName }); }; }); </script>
7、{{}}與ng-bind指令：兩個指令都是實現數據綁定
區別：由於{{}}綁定數據時，會因為載入後未渲染屬性而導致瀏覽器閃爍，ng-bind不會閃爍
ng-bind只能執行單個變數綁定
但是可以藉助：ng-bind-template定義一個模板實現多變數綁定
如：<h1 ng-bind-template ="{{text}} {{text}}" ></h1>
今天就到此為止，明天繼續研究指令的生深入研究學習
