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

来源：互联网发布：淘宝卖家遇到敲诈编辑：程序博客网时间：2024/05/21 16:23

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

0 0