AngularJs模块化指令03（点赞）

最新推荐文章于 2022-09-18 17:04:13 发布

cherishSpring

最新推荐文章于 2022-09-18 17:04:13 发布

阅读量1.2k

点赞数

分类专栏： # AngularJS 文章标签： AngularJs 指令

本文链接：https://blog.csdn.net/cherishSpring/article/details/51385884

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>