版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zzp961224/article/details/70175838
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="test">
<div ng-controller="ctrl">
商品名称:{{goods.title}}<br/>
价格:{{goods.price}}<br/>
购买数量:{{goods.num}} 件<br/>
总计:{{goods.price*goods.num}}元<br/>
<!--不要与onclick混淆-->
<button ng-click="add()">增加</button>
<button ng-click="reduce()">减少</button>
</div>
<script>
//实例化一个模块,模块管理的DOM节点是<body ng-app="test">...</body>
var m = angular.module('test', []);
//操作一个控制器,第一个参数为控制器的名字,第一个scope为实参,第二个为形参,第二个的名称是可以改变的
//scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用
m.controller('ctrl', ['$scope', function ($scope) {
$scope.goods = {'title': 'apple mac', 'price': 300, 'num': 0};
$scope.add = function () {
//设定最多6件货物:自加之后与6比较大小,取较小的那个数
$scope.goods.num = Math.min(++$scope.goods.num, 6);
}
$scope.reduce = function () {
//设定最少0件货物:自剪之后与0比较大小,取较大的那个数
$scope.goods.num = Math.max(--$scope.goods.num, 0);
}
}])
</script>
</body>
</html>
效果如图:
关于在操作控制器时,注入scope对象还有另外一种写法,但是这种写法容易出bug
var app = angular.module('test', []);
app.controller('ctrl', function ($scope) {
$scope.firstName = 'John';
$scope.lastName = 'Doe';
$scope.fullName = function () {
return $scope.firstName + " " + $scope.lastName;
}
});
可以看到,在操作控制器时只传入了一个scope,但这在函数里面是识别为形参的。当我们的网站要最求加载速度的时候往往会去压缩代码文件,而压缩代码文件就会自动将形参替换为如:a 这样的单字母名称,这时网站内容就不能正常显示了