模块指令编写"点赞"



上节课家庭作业回顾


自己编写一个简单的模块指令。



AngularJs模块化应用


1.编写一个“点赞”的指令;


2.模块指令的通讯。


代码


<!doctype html>
<html ng-app="lesson" ng-controller="MainCtrl" >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 10
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  li{padding:18px 8px;}
  </style>
 
  </head>
 
  <body>
  
  <ul>
<li ng-repeat=" userTitle in UserTitleList">
<label>{{userTitle.UserName}}</label><br />
<h4>{{userTitle.Title}}</h4> <span> {{userTitle.LikeAmount}}</span> <like content="userTitle" ></like><br />
<label>{{userTitle.Time}}</label>
<ul>
<li ng-repeat=" likeList in userTitle.LikeList">
<span>{{likeList.Text}}</span>
</li>
</ul>
</li>
  </ul>
 
<script src="scripts/angular-1.4.6.min.js"></script>
<script>
var app = angular.module("lesson",[]);
app.controller("MainCtrl",function($scope){
 
$scope.UserTitleList =[
{ UserName : 'Tom' , Title : '今天天气不错!' , Time : ' 2016-03-07' , LikeAmount : 0 ,LikeList:[]},
{ UserName : 'Tom' , Title : '今天要去打篮球!' , Time : ' 2016-03-06' , LikeAmount : 0,LikeList:[] },
{ UserName : 'Tom' , Title : '今天路上碰到一只边牧!' , Time : ' 2016-03-05' , LikeAmount : 0 ,LikeList:[]},
{ UserName : 'Tom' , Title : '走路去上班。' , Time : ' 2016-03-04' , LikeAmount : 0 ,LikeList:[]},
{ UserName : 'Tom' , Title : '今晚回家煮面吃。' , Time : ' 2016-03-03' , LikeAmount : 0 ,LikeList:[]},
];
 
});
 
app.directive("like",function(){
var direction = {};
direction.restrict = 'AE'; 
direction.template = "<button ng-click='Like()' >赞</button>";
 
direction.scope = {
content:"="
};
 
direction.link = function($scope,element){
$scope.Like=function(){
//$scope.content.LikeAmount = $scope.content.LikeAmount+1;
$scope.content.LikeList.push({Text:"Jerry点了赞"});
};
};
 
return direction;
});
 
 
</script>
 
  </body>
</html>


执行结果


初始情况:


prove6.png


有人点赞:


prove7.png



本课小结


编写了一个点赞的实例。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部