1. AngularJS表达式
<div ng-app="App3">
<!-- 数字 -->
<div ng-init="x = 5; y = 10.234"></div>
<p>{{x * y}}</p>
<p ng-bind="x * y"></p>
<hr>
<!-- 数组 -->
<div ng-init="arr = [2, '3a', 4, 2, 'a']"></div>
<p>第2个元素为:{{arr[1]}}</p>
<p ng-bind="'第2个元素为:' + arr[1]"></p>
<hr>
<!-- 字符串 -->
<div ng-init="name = 'a b c d'"></div>
<p>{{name}}</p>
<p ng-bind="name"></p>
<hr>
<!-- 对象 -->
<div ng-init="user = {username:'root', password:'1'}"></div>
<p>用户名:{{user.username}},密码:{{user.password}}</p>
<p ng-bind="'用户名:' + user.username + ', 密码:' + user.password"></p>
</div>
<script>
angular.module("App3", []);
</script>
运行结果:
2. AngularJS指令
ng-repeat:重复HTML元素
<div ng-app="App4">
<ul ng-init="users=[{name:'q1', password:'z1'}, {name:'w1', password:'x1'}]">
<!-- ng-repeat:重复HTML元素 -->
<li ng-repeat="x in users">{{x.name}}</li>
</ul>
</div>
<script>
angular.module('App4', []);
</script>
自定义指令:.directive()函数
<div ng-app="App4">
<ul ng-init="users=[{name:'q1', password:'z1'}, {name:'w1', password:'x1'}]">
<!-- ng-repeat:重复HTML元素 -->
<li ng-repeat="x in users">{{x.name}}</li>
</ul>
<hr>
<!-- 自定义指令 -->
<wang-directive></wang-directive>
<p wang-directive></p>
</div>
<script>
var app = angular.module('App4', []);
app.directive('wangDirective', function() {
return {
restrict : "EA",
template : "<h1>自定义指令</h1>"
};
});
</script>
注:
restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
3. AngularJS作用域(scope)
- 对于AngularJS应用来说,它的MVC分别指:M(模型,当前视图中的可用数据)、V(HTML)、C(JavaScript函数,添加或修改属性)
- scope:应用在HTML(视图)和JavaScript(控制器)之间的纽带,它是一个JavaScript对象,有自己的属性和方法
- 根作用域:$rootScope,它可以作用在ng-app指令包含的所有HTML元素中。既其作用域整个应用,是各个Controller中scope的桥梁,可用在各个controller中使用
<div ng-app="App5" ng-controller="controller3">
<input type="text" name="name" id="name" ng-model="name">
<h1>{{root}}</h1>
<button ng-click="fun()">点我</button>
</div>
<script>
var app = angular.module('App5', []);
app.controller('controller3', function($scope, $rootScope) {
$scope.name = '惘';
$rootScope.root = '顾';
$scope.fun = function() {
alert($scope.name + $rootScope.root);
};
});
</script>