Angular JS 学习笔记四

最新推荐文章于 2024-07-23 12:35:43 发布

御剑飞天

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量582

点赞数

分类专栏： Javascript Angular-JS 文章标签： angular javascript

本文链接：https://blog.csdn.net/MatchstickMan/article/details/50191765

版权

Angular-JS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Javascript

4 篇文章 0 订阅

订阅专栏

下面谈谈controller和scope的概念。Angular JS是建立在MVC的架构上，HTML相对于Angular JS来说是view，那我们如何控制view上面的model呢，那我们引入controller的概念。controller就是控制器，就是对数据的操作。最简单的就是加减乘除的操作。下面以例子说话。
需求：输入金额，自动计算税（假定税率为6%）和总金额并输出。
那么首先我们建立最基本的输入和输出html

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('CostCtrl', function($scope){
            $scope.cost = 1000.1;
            $scope.tax = $scope.cost * 0.06;
        });
    </script>
</head>

<body ng-app="myApp" ng-controller="CostCtrl">
    Cost: <input type="text" ng-model="cost" placeholder="cost" />
    <p>
        This is your cost: {{cost|currency}}<br>
        This is your tax: {{tax|currency}}
    </p>
</body>
</html>

$scope的概念就是在这个controller里面的一个元素和函数的集合。所有变量都可以通过这个$ scope获得。
那么如何理解这个scope变量所定义的范围呢？
在一个ng-app里面，创建三个ng controller，例如下代码：

<body ng-app="myApp" >
    <div ng-controller="CostCtrl">
        Cost: <input type="text" ng-model="cost" placeholder="cost" />
        <p>
            This is your cost: {{cost|currency}}<br>
        </p>
    </div>
    <div ng-controller="CostCtrl">
        Cost: <input type="text" ng-model="cost" placeholder="cost" />
        <p>
            This is your cost: {{cost|currency}}<br>
        </p>
    </div>
    <div ng-controller="CostCtrl">
        Cost: <input type="text" ng-model="cost" placeholder="cost" />
        <p>
            This is your cost: {{cost|currency}}<br>
        </p>
    </div>
</body>

那么所显示的就像是这样
这里写图片描述
你会发现，改变第一个Cost不会影响到第二和第三个Cost，这个就是scope的限制。
下面还有一点要介绍，在计算tax的时候，你会发现第一段代码中tax是不会根据cost的变化而变化。那如何解决这个问题呢？答案是$watch。如下面代码所示：

<script>
    var app = angular.module('myApp',[]);
    app.controller('CostCtrl', function($scope){
        $scope.cost = 1000.1;
        $scope.$watch('cost', function(){
           $scope.tax = $scope.cost * 0.06;
        });
    });
</script>

然后tax就会动态地实现。当然我们还可以做些进一步的改进。比如我们可以传入ov和nv，分别代表old value和new value。若新值和旧值一样，那么就不去执行计算代码。在这里可能有点多余，但是若在CPU和带宽受限的情况下，这个就很有必要了。
我们接下来可以把总值的代码也添加上去。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('CostCtrl', function($scope){
            $scope.cost = 1000.1;
            $scope.$watch('cost', function(nv, ov){
                if (nv != ov) {
                    $scope.tax = $scope.cost * 0.06;
                }
            });
            $scope.$watch('tax', function(){
                $scope.total = parseFloat($scope.cost) + $scope.tax
            });
        });
    </script>
</head>

<body ng-app="myApp" >
    <div ng-controller="CostCtrl">
        Cost: <input type="text" ng-model="cost" placeholder="cost" />
        <p>
            This is your cost: {{cost|currency}}<br>
            This is your cost: {{tax|currency}}<br>
            This is your total: {{total|currency}}
        </p>
    </div>
</body>
</html>