angular学习：我的第一个自定义指令

最近两天看了下官方的文档，和网上找到的教程，来学习angular里的自定义指令。

下面定义的指令想实现的功能很简单，点击 + - 能够改变商品的数量

增加减少商品数量按钮功能有些问题，还需要完善
PS：写这个指令除了想练习指令的属性的运用，更想知道scope中的 '=' '@' '&'怎么使用
今天看了下官方文档的讲解，还是不怎么理解，所以决定写个例子看看

写的购物车，点击 + - 不能改变数量？

欢迎大家批评指正吐槽！！！

下面是index.html 代码

<!DOCTYPE html>
<html ng-app="myApp">
  <head >
    <meta charset="utf-8">
    <title>angular directive tab选项卡</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
  </head>
  <body>
    <shop-cart></shop-cart>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      angular.module('myApp',[])
      .controller('myCtrl',['$scope',function($scope){
       $scope.datas = [
         {name:'花生',price:14,number:1,addBtn:'+',reduceBtn:'-'},
         {name:'牛奶',price:25,number:1,addBtn:'+',reduceBtn:'-'},
         {name:'蛋糕',price:25,number:1,addBtn:'+',reduceBtn:'-'}
       ];
       }])
      .directive('shopCart',function() {
        return {
          restrict:'EA',
          scope:{
            onAdd:'&',
            onReduce:'&'
          },
          templateUrl:'shop-cart.html',
          controller: 'myCtrl',
          link: function(scope,element,attr) {
            scope.onAdd = function(num,index){
              num =scope.datas[index].number  + 1
              scope.datas[index].number = num;

            };
            scope.onReduce = function(num,index){
              if(num > 0) {
                num =scope.datas[index].number - 1
                scope.datas[index].number = num;
              }
            };
             console.log(scope);
          }
        }
      });
    </script>
  </body>
</html>

下面是引入模板的html

<table class="table table-striped" ng-controller="myCtrl">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>商品数量</th>
      <th>增加商品数量</th>
      <th>减少商品数量  </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="data in datas">
      <td>{{data.name}}</td>
      <td>{{data.price}}</td>
      <td ng-model="data.number">{{data.number}}</td>
      <td><a ng-click="onAdd(data.number,$index)">{{data.addBtn}}</a></td>
      <td><a ng-click="onReduce(data.number,$index)">{{data.reduceBtn}}</a></td></td>
    </tr>
  </tbody>
</table>

a=b 表示 a 的值取变量 b 的值；
a@b 表示 a 的值是 'b' 这个字符串；
a&b 表示 a 引用 b，一般用来放一个函数

【热门文章】