前端 - angular學(xué)習(xí)：我的第一個自定義指令
問題描述
最近兩天看了下官方的文檔，和網(wǎng)上找到的教程，來學(xué)習(xí)angular里的自定義指令。
下面定義的指令想實(shí)現(xiàn)的功能很簡單，點(diǎn)擊 + - 能夠改變商品的數(shù)量
增加減少商品數(shù)量按鈕功能有些問題，還需要完善PS：寫這個指令除了想練習(xí)指令的屬性的運(yùn)用，更想知道scope中的 ’=’ ’@’ ’&’怎么使用今天看了下官方文檔的講解，還是不怎么理解，所以決定寫個例子看看
寫的購物車，點(diǎn)擊 + - 不能改變數(shù)量？
歡迎大家批評指正吐槽！！！
<!DOCTYPE html><html ng-app='myApp'> <head > <meta charset='utf-8'> <title>angular directive tab選項(xiàng)卡</title> <link rel='stylesheet' 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 - 1scope.datas[index].number = num; } }; console.log(scope); }} }); </script> </body></html>下面是引入模板的html
<table ng-controller='myCtrl'> <thead> <tr> <th>商品名稱</th> <th>單價</th> <th>商品數(shù)量</th> <th>增加商品數(shù)量</th> <th>減少商品數(shù)量 </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>
問題解答
回答1：a=b 表示 a 的值取 變量 b 的值；a@b 表示 a 的值是 ’b’ 這個字符串；a&b 表示 a 引用 b，一般用來放一個函數(shù)
相關(guān)文章：
1. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?2. debian - docker依賴的aufs-tools源碼哪里可以找到啊？3. css3 - border-bottom 的長度可否超過盒子的寬度呢？實(shí)現(xiàn)如下圖效果。（我的書下面的線）4. docker gitlab 如何git clone？5. android - 用textview顯示html時如何寫imagegetter獲取網(wǎng)絡(luò)圖片6. JavaScript事件7. css3 - css怎么實(shí)現(xiàn)圖片環(huán)繞的效果8. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？9. mysql優(yōu)化 - mysql EXPLAIN之后怎么看結(jié)果進(jìn)行優(yōu)化 ？10. java - spring boot @Autowired
網(wǎng)公網(wǎng)安備