3、AngularJS中$scope的基本使用方法

阅读() @2019-05-12 11:46:36

AngularJS中$scope的基本使用方法,先看一段代码:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body>
	<div ng-app='app' ng-controller='ctrl'>
		<input type="text" ng-model='name' />
		<h1 ng-bind='name'></h1>
		<h2>{{name}}</h2>
	</div>
</body>
</html>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.name = '赵一鸣';
	}]);
</script>

$scope服务是方法与属性的集合,用于与视图进行交互,使用ng-bind或ng-model等指令,在视图中展示数据写在大括号内{{expression}}。

angular.module(),第一个参数是模块名称,与html代码中的ng-app对应,第二个参数是一个数组,表示这个模块要依赖其他的模块,目前还没有需要依赖的模块,所以这一点后面的笔记中再说。

上面定义模块的js代码还可以这样写:

var m = angular.module('app', []);
m.controller('ctrl', function($scope){
	$scope.name = '赵一鸣';
});

使用上面这种写法的时候,controller中的回调函数形参必须是$scope,如果换成其他的就会出错,因为Angular服务中只有$scope,换成其他的就找不到了。

如果用最开始的那种写法,那么回调函数中的形参可以自定义,比如a、b、c、d等等都可以:

var m = angular.module('app', []);
m.controller('ctrl', ['$scope', function(a){
	a.name = '赵一鸣';
}]);

一把情况下,为了保持命名规范,我们都用本文最开始的那种写法。

下面来做一个实例,比如我要做一个购物车,可以为用户展示商品单价,最多选购数量,然后计算出总价,代码如下:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body>
	<div ng-app="app" ng-controller="ctrl">
		<p>商品名称:{{goods.data.name}}</p>
		<p>商品单价:{{goods.data.price}}元</p>
		<p>购买数量:{{goods.data.num}}</p>
		<p>商品总价:{{goods.data.price*goods.data.num}}</p>
		<p>
			<button ng-click='goods.add()'>增加</button>
			<button ng-click='goods.reduce()'>减少</button>
		</p>
	</div>
</body>
</html>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.goods = {
			'data' : {
				'name' : '赵一鸣的AngularJs学习笔记',
				'price' : '300',
				'num' : '1'
			},
			'add' : function(){
				//最多只能买6套
				$scope.goods.data.num = Math.min(++$scope.goods.data.num, 6);
			},
			'reduce' : function(){
				//最少是0套
				$scope.goods.data.num = Math.max(--$scope.goods.data.num, 0);
			}
		};
	}]);
</script>

(完)!

微信二维码