AngularJS语法详解(续)(3)

对于大型的itms数组来说,如果每次在Angular显示页面时只重新计算bill属性,那么性能会好很多。通过创建一个带有watchFn的$watch函数,我们可以实现这一点。

复制代码 代码如下:


$scope.$watch(
    var totalCart = function() {
                var total = 0;
                for (var i=0,len=$scope.items.length;i<len;i++) {
                    total = total + $scope.items[i].price * $scope.items[i].quantity;
                }
                $scope.bill.totalcart = total;
                $scope.bill.discount = total > 100 ? 10 :0;
                $scope.bill.subtotal = total - $scope.bill.discount;
            });

监控多个东西

如果你想监控多个属性或者对象,并且当其中任何一个发生变化时就会去执行一个函数,你有两种基本的选择:

监控把这些属性连接起来之后的值

把他们放在一个数组或者对象中,然后给deepWAtch参数传递一个值

分别说明:
在第一种情况下,如果你的作用域中存在一个things对象,它带有两个属性a和b,当这两个属性发生变化时都需要执行callMe()函数,你可以同时监控这两个属性 $scope.$watch('things.a + things.b',callMe(...));
当列表非常长,你就需要写一个函数来返回连接之后的值。

在第二种情况下,需要监控things对象的所有属性,你可以这么做:

复制代码 代码如下:


$scope.$watch('things',callMe(...),true);

使用module组织依赖关系

provider(name,Object OR constructor()) 说明: 一个可配置的服务,创建逻辑比较的复杂。如果你传递了一个Object作为参数,那么这个Object对象必须带有一个名为$get的函数,这个函数需要返回服务的名称。否则,angularjs会认为你传递的时一个构造函数,调用构造函数会返回服务实例对象。
factory(name,$get Function()) 说明:一个不可配置的服务,创建逻辑比较的复杂。你需要指定一个函数,当调用这个函数时,会返回服务实例。可以看成provider(name,{$get:$getFunction()})的形式。
service(name,constructor()) 一个不可配置的服务,创建逻辑比较的简单。与上面的provider函数的constructor参数类似,Angular调用他可以创建服务实例。

使用module factory的例子

复制代码 代码如下:


<html ng-app='ShoppingModule'>
<head>
<title>Your Shopping Cart</title>
<script type="text/javascript" src="https://www.jb51.net/angular.min.js"></script>
<script type="text/javascript">
    var ShoppingModule = angular.module('ShoppingModule',[]);
    ShoppingModule.factory('Items',function() {
        var  items = {};
        items.query = function() {
            return [
                {title:'Paint pots',description:'Pots full of Paint',price:3.95},
                {title:'Paint pots',description:'Pots full of Paint',price:3.95},
                {title:'Paint pots',description:'Pots full of Paint',price:3.95}
            ];
        };
        return items;
    });
    function ShoppingController($scope,Items) {
        $scope.items = Items.query();
    }
</script>
</head>
<body ng-controller='ShoppingController'>
<h1>Shop!!</h1>
<table>
    <tr ng-repeat='item in items'>
        <td>{{item.title}}</td>
        <td>{{item.description}}</td>
        <td>{{item.price | currency}}</td>
    </tr>
</table>
</body>
</html>

引入第三方模块

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgxyyw.html