Dalam dua hari lalu, saya telah membaca dokumen rasmi dan tutorial yang ditemui dalam talian untuk mempelajari arahan tersuai dalam sudut.
Fungsi yang ingin dicapai oleh arahan di bawah adalah sangat mudah Klik - untuk menukar kuantiti produk
Terdapat beberapa masalah dengan fungsi butang menambah dan mengurangkan bilangan produk, dan ia perlu diperbaiki
PS: Selain mempraktikkan penggunaan atribut arahan semasa menulis arahan ini, saya juga ingin tahu cara menggunakan '=' '@' '&' dalam skop
Saya membaca penjelasan dalam dokumen rasmi hari ini, tetapi saya masih tidak memahaminya, jadi saya memutuskan untuk menulis contoh untuk melihat
Ditulis dalam troli beli-belah, klik - Tidak boleh menukar kuantiti?
<!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>
<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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
a=b bermaksud nilai a mengambil nilai pembolehubah b;
a@b bermaksud nilai a ialah rentetan 'b'
a&b bermaksud a merujuk kepada b, secara amnya digunakan untuk meletakkan fungsi