Angularjs的指令學習筆記
1.指令
ng-app ng-controller
<script src="../js/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);//myapp為ng-app的名字
app.controller("myCtrl", function ($scope) {//myctrl為控制器的名字,scope為內建物件
$scope.firstName = "John";//可以理解為給屬性賦值,然後上方的{{}}內容就會指向這裡的資料
$scope.lastName = "Doe";
});
</
ng-app 指令用於告訴 AngularJS 應用當前這個元素是根元素
所有 AngularJS 應用都必須要要一個根元素。
HTML 文件中只允許有一個 ng-app 指令，如果有多個 ng-app 指令，則只有第一個會被使用。
ng-controller 指令用於為你的應用新增控制器。
在控制器中，你可以編寫程式碼，製作函式和變數，並使用 scope 物件來訪問。
ng-bind ng-init
<div ng-app=
<h1 ng-bind="myText"></h1>//ng-bind則是替換當前標籤的內容為這個表示式或者變數
//也可以為下面的形式表示 是一樣的效果
<h2 class="ng-bind:myText"></h2>
ng-bind-html
<script src="../js/angular.min.js"></script>
<script src="../js/angular-sanitize.min.js"></script>//angular的另一個庫
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function ($scope) {
$scope.myText = "My name is:<h1>John Doe</h1>";
});
</script>
ng-bind-html是通過一個安全的方式將內容繫結到 HTML 元素上,將內容寫入html,和ng-bind是有去區別
ng-bind-template
<div ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl"></div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
ng-bind-template 指令用於告訴 AngularJS 將給定表示式的值替換 HTML 元素的內容。
當你想在 HTML 元素上繫結多個表示式時可以使用 ng-bind-template 指令。
效果和ng-bind有些類似,但是使用方式不同
ng-blur
<body ng-app="">//記得要加上ng-app=”” 不然不會起作用
<input ng-blur="count = count + 1" ng-init="count=0"/>
<h1>{{count}}</h1>
</body>
ng-blur 指令用於告訴 AngularJS HTML 元素在失去焦點時需要執行的表示式。
AngularJS 中的 ng-blur 指令不會覆蓋原生的 onblur 事件， 如果觸發該事件，ng-blur 表示式與原生的 onblur 事件都會執行。
ng-change
值改變事件
<body ng-app="myApp">//必要
<div ng-controller="myCtrl">//控制器
<input type="text" ng-change="myFunc()" ng-model="myValue"/>
//ng-change為方法名,方法在下方 ,ng-model
<p>改變了{{count}} 次</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function ($scope) {
$scope.count = 0;
$scope.myFunc = function () {
$scope.count++;
};
}]);
</script>
ng-change為值改變觸發的事件,需要和ng-model搭配使用,不會覆蓋原生的 onchange 事件
用angular.module來註冊和檢索模組。所有模組應提供給一個應用程式必須使用這種機制註冊。 當傳遞了2個或更多的引數時，建立一個新的模組。如果僅通過一個引數，一個現有的模組（作為第一個引數傳遞給模組）被檢索。
ng-checked
ng-checked 指令用於設定複選框(checkbox)或單選按鈕(radio)的 checked 屬性。
如果 ng-checked 屬性返回 true，複選框(checkbox)或單選按鈕(radio)將會被選中。
ps:沒啥用,直接用jquery做這個方便些
ng-class
<style>
.sky {
color:white;
background-color:lightblue;
padding:20px;
font-family:"Courier New";
}
.tomato {
background-color:coral;
padding:40px;
font-family:Verdana;
}
</style>
<body ng-app="">
<select ng-model="home">//和下方的home繫結,以便於動態繫結class
<option value="sky">Sky</option>//opiton的值對應的為樣式
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>
ng-class 指令用於給 HTML 元素動態繫結一個或多個 CSS 類。
ng-class 指令的值可以是字串，物件，或一個數組。
如果是字串，多個類名使用空格分隔。
如果是物件，需要使用 key-value 對，key 是一個布林值，value 為你想要新增的類名。只有在 key 為 true 時類才會被新增。
如果是陣列，可以由字串或物件組合組成，陣列的元素可以是字串或物件
ps:感覺jquery的addclass某些時候更合適
ng-class-even
<style>
.striped {
color: white;
background-color: black;
}
</style>
<body ng-app="myApp">
<table ng-controller="myCtrl">
<tr ng-repeat="x in records" ng-class-even="'striped'">//striped為上方的樣式
//ng-repeat 在這裡類似foreach迴圈 ,x為物件, records為陣列
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.records = [
{
"Name": "Alfreds Futterkiste",
"Country": "Germany"
},
{
"Name": "Berglunds snabbk",
"Country": "Sweden"
},
{
"Name": "Centro comercial Moctezuma",
"Country": "Mexico"
},
{
"Name": "Ernst Handel",
"Country": "Austria"
}
]
});
</script>
為表格的偶數行設定class,用來設定隔行變色?jquery也有類似的功能
ng-class-odd
和上一個類似,這個為奇數
ng-click
點選事件,沒多少好講的
ng-cloak
<div ng-app="">
<p ng-cloak>{{ 5 + 5 }}</p>
</div>
頁面載入時防止應用閃爍,載入時防止 AngularJS 程式碼未載入完而出現的問題
ng-copy
<body ng-app="">
<input ng-copy="count = count + 1" ng-init="count=0" value="拷貝這個文字" />
<p>文字被拷貝 {{count}} 次。</p>
<p>例項中變數 "count" 的值在輸入框的文字被拷貝時會自動增加 1。</p>
</body>
在輸入框的文字被拷貝時執行的操作
ng-copy 指令不會覆蓋元素的原始 oncopy 事件, 事件觸發時，ng-copy 表示式與原始的 oncopy 事件將都會執行
ng-csp
<body ng-app="" ng-csp>
ng-csp 指令用於修改 AngularJS 的安全策略。
如果使用了 ng-csp 指令， AngularJS 將不會執行eval 函式，這樣就無法注入內聯樣式。
設定 ng-csp 指令為 no-unsafe-eval, 將阻止 AngularJS 執行 eval 函式，但允許注入內聯樣式。
設定 ng-csp 指令為 no-inline-style, 將阻止 AngularJS 注入內聯樣式，但允許 執行 eval 函式。
如果開發 Google Chrome 擴充套件或 Windows 應用 ng-csp 指令是必須的。
注意:ng-csp 指令不會影響 JavaScript,但會修改 AngularJS 的工作方式，這就意味著: 你仍然可以編寫 eval 函式, 且也可以正常執行, 但是 AngularJS 不能執行它自己的 eval 函式。如果採用相容模式，會降低 30% 的效能
聽過用了能提高效能???
ng-cut
<input ng-cut="count = count + 1" ng-init="count=0" value="剪下這個文字" />
ng-cut 指令用於告訴 AngularJS 在剪下 HTML 元素的文字時需要執行的操作
ng-cut 指令用於告訴 AngularJS 在剪下 HTML 元素的文字時需要執行的操作。
ng-cut 指令指令不會覆蓋元素的原始 oncut 事件, 事件觸發時，ng-cut 表示式與原始的 oncut 事件將都會執行。
ng-dblclick
<h1 ng-dblclick="count = count + 1" ng-init="count=0">Welcome</h1>
ng-dblclick 指令用於告訴 AngularJS 在滑鼠雙擊 HTML 元素時需要執行的操作。
ng-dblclick 指令不會覆蓋元素的原始 ondblclick 事件, 滑鼠雙擊時，ng-dblclick 表示式與原始的 ondblclick 事件將都會執行。
ng-disabled
<body ng-app="">
點選這裡禁用所有表單輸入域:<input type="checkbox" ng-model="all"><br>//將all為的值綁定當前標籤的屬性,選中為true
<br>
<input type="text" ng-disabled="all">//all為ng-model繫結的屬性
<input type="radio" ng-disabled="all">
<select ng-disabled="all">
<option>Female</option>
<option>Male</option>
</select>
ng-disabled 指令設定表單輸入欄位的 disabled 屬性(input, select, 或 textarea)。
如果 ng-disabled 中的表示式返回 true 則表單欄位將被禁用。
ng-focus
<body ng-app="">
<input ng-focus="count = count + 1" ng-init="count=0" />
<h1>{{count}}</h1>
ng-focus 指令用於告訴 AngularJS 在 HTML 元素獲取焦點時需要執行的操作。
ng-focus 指令不會覆蓋元素的原始 onfocus 事件, 事件觸發時，ng-focus 表示式與原始的 onfocus 事件將都會執行。
ng-hide
<body ng-app="">
<input type="checkbox" ng-model="myVar">
<div ng-hide="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>
ng-hide 指令在表示式為 true 時隱藏 HTML 元素。
ng-hide 是 AngularJS 的預定義類，設定元素的 display 為 none。
ng-href
<body ng-app="">
<div ng-init="myVar = 'http://www.baidu.com'">
<h1>AngularJS中文網</h1>
<p>訪問 <a ng-href="{{myVar}}">{{myVar}}</a> 學習!</p>
</div>
ng-href 指令覆蓋了原生的 <a> 元素 href 屬性。
如果在 href 的值中有 AngularJS 程式碼，則需要使用 ng-href 而不是 href。
ng-href 指令確保了連結是正常的，即使在 AngularJS 執行程式碼前點選連結
ng-if
<body ng-app="">
<input type="checkbox" ng-model="myVar" ng-init="myVar = true">
//ng-model繫結屬性,ng-init建立表示式
<div ng-if="myVar">//if判斷
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>
ng-if 指令用於在表示式為 false 時移除 HTML 元素。
如果 if 語句執行的結果為 true，會新增移除元素，並顯示。
ng-if 指令不同於 ng-hide， ng-hide 隱藏元素，而 ng-if 是從 DOM 中移除元素
ng-include(特殊)
<body ng-app="">
<iframe frameborder="0" scrolling="no" src="demo.html" seamless></iframe>
123123
<div ng-include="'demo.html'"></div>
12312
ng-include 指令用於包含外部的 HTML 檔案。
包含的內容將作為指定元素的子節點。
ng-include 屬性的值可以是一個表示式，返回一個檔名。
預設情況下，包含的檔案需要包含在同一個域名下。
ps:這個include和jsp標籤的include是一樣的,包括小指令碼,但是和這個iframe差距還是很大,當你用上方程式碼測試就知道了,如果當你在html頁面想要jsp標籤的include的效果時,可以用這個.
ng-keydown ng-keypress ng-keyup
分別為按下,按下中,彈回事件
<body ng-app="">
<input ng-keydown="count = count + 1" ng-init="count=0" />
<h1>{{count}}</h1>
按下鍵盤產生的操作,任務鍵盤即可
ps:建議使用jquery的keydown/keypress/keyup事件,可以指定特定的鍵產生特定的事件
ng-list
<div ng-app="">
<input ng-model="customers" ng-list="."/>
&nbs