您的位置：首页 > Web前端 > AngularJS

AngularJs模块化指令03（点赞）

2016-05-12 17:25 525 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模块化应用03（点赞）</title>
<script src="angular.js"></script>
<style>
li{
padding: 18px 8px;
}
</style>
<script>
var app=angular.module("modelDemo03",[]);
app.controller("modelCtrl03",function($scope){
$scope.UserTitleList=[
{UserName:'Tom',Title:'今天天气很好的样子',Time:'2016-05-12',LikeAmount:0,LikeList:[]},
{UserName:'Jerry',Title:'我们出去玩好么',Time:'2016-05-12',LikeAmount:0,LikeList:[]},
{UserName:'Jack',Title:'算了，宝宝要敲代码。。。',Time:'2016-05-12',LikeAmount:0,LikeList:[]}
];
});

app.directive("like",function(){
var direction={};
direction.restrict='AE';
direction.template="<button ng-click='Like()'>赞</button>";

//这是一个对象
//意思是我们将循环中的userTitle的这个对象传给了指令的content，而我们在指令content里面就可以对content对象改变它的likeAmount的值，
//而这个LikeAmount的值会反馈到我们的controller里面，而controller对应的UserTitleList当中每一个被改变过的LikeAmount的值都会反应到
//ng-repeat循环的元素里面去
direction.scope={
content:"="//这是对象里的属性，是我们自己定义的
};

//link指令
direction.link=function($scope,element){
$scope.Like=function(){
$scope.content.LikeAmount=$scope.content.LikeAmount+1;
$scope.content.LikeList.push({Text:"jerry点了赞"});
}
};

return direction;
});
</script>
</head>
<body ng-app="modelDemo03" ng-controller="modelCtrl03">
<!--同一个人对同一条数据进行不断的点赞-->
<ul>
<li ng-repeat="userTitle in UserTitleList">
{{userTitle.UserName}}<br/>
<h4>{{userTitle.Title}}</h4><span>{{userTitle.LikeAmount}}</span>
<like content="userTitle"></like><br/>
{{userTitle.Time}}
<ul>
<li ng-repeat="likeList in userTitle.LikeList">
<span>{{likeList.Text}}</span>
</li>
</ul>
</li>
</ul>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航