《我的Angular入坑记》——初识scope对象

本文链接：https://blog.youkuaiyun.com/zzp961224/article/details/70175838

本文介绍了一个使用AngularJS实现的简易购物车示例，展示了如何通过双向数据绑定实时更新商品数量及总价，并提供了增加和减少商品数量的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 这样的单字母名称，这时网站内容就不能正常显示了