本节包括：AngularJS表达式、AngularJS指令、AngularJS模型、AngularJS的Scope（作用域）、AngularJS控制器、AngularJS过滤器
AngularJS 表达式
AngularJS 使用 表达式 把数据绑定到 HTML。
- AngularJS 表达式写在双大括号内：{{ expression }}。
- AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
- AngularJS 将在表达式书写的位置"输出"数据。
- AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 表达式 与 JavaScript 表达式对比
- 类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
- 与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
- 与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
- 与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
AngularJS 指令
- AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
- ng-app 指令初始化一个 AngularJS 应用程序。
- ng-init 指令初始化应用程序数据。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>
验证用户输入
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
- ng-repeat 指令会重复一个 HTML 元素：
<div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
- 创建自定义的指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<runoob-directive></runoob-directive>//通过元素名调用
<div runoob-directive></div> //通过属性调用
<div class="runoob-directive"></div> //通过类名调用
<!-- directive: runoob-directive --> //通过注释调用
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>
限制使用
通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
restrict 值可以是以下几种:
- E 作为元素名使用
- A 作为属性使用
- C 作为类名使用
- M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
AngularJS Scope(作用域)
- Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
- Scope 是一个对象，有可用的方法和属性。
- Scope 可应用在视图和控制器上。
如何使用 Scope
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
控制器中的属性对应了视图上的属性：
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
Scope 概述
AngularJS 应用组成如下：
- View(视图), 即 HTML。
- Model(模型), 当前视图中可用的数据。
- Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
注意 $rootScope 在循环对象内外都可以访问。
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
ng-controller 指令定义了应用程序控制器
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
让我们来分析一下上面的代码：
- AngularJS 应用程序由 ng-app 定义。应用程序在 <code><div></code> 内运行。
- ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
- myCtrl 函数是一个 JavaScript 函数。
- AngularJS 使用$scope 对象来调用控制器。
- 在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
- 控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
- 控制器在作用域中创建了两个属性 (firstName 和 lastName)。
- ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
控制器方法
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法（变量和函数）：
<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
外部文件中的控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
personController.js 的外部文件：
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
其他实例
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
以下实例创建一个新的控制器文件 namesController.js:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
AngularJS 过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器可用于转换数据：
表达式中添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
uppercase 过滤器将字符串格式化为大写：
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
orderBy 过滤器根据表达式排列数组：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
过滤输入：输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>