1. 程式人生 > >angularjs常用指令

angularjs常用指令

範圍 oob orm 顯示 ret spa angularjs show 默認值

1、ng-app=" " 定義angularJS的使用範圍;

2、ng-init="變量=值;變量=‘值‘" 初始化變量的值,有多個變量時,中間用分號隔開;

3、ng-model="變量" 定義變量名;

4、ng-bind="變量" 綁定變量名,獲取該變量的數據。這裏的變量就是第3條的變量名。但是一般都用雙重花括號來獲取變量的值,比如:{{變量}}。

AngularJS 通過 指令 擴展了 HTML,且通過 表達式 綁定數據到 HTML。

AngularJS 通過 ng-directives 擴展了 HTML。

ng-app 指令定義一個 AngularJS 應用程序。

ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。

ng-bind 指令把應用程序數據綁定到 HTML 視圖。
例如:
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>

ng-repeat 指令會重復一個 HTML 元素;

創建自定義的指令:
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>

</body>

restrict 值可以是以下幾種:

E 作為元素名使用
A 作為屬性使用
C 作為類名使用
M 作為註釋使用

restrict 默認值為 EA, 即可以通過元素名和屬性名來調用指令

提示信息會在 ng-show 屬性
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>
以上實例中,提示信息會在 ng-show 屬性返回 true 的情況下顯示。

angularjs常用指令