좋아요 버튼 실험용

좋아요버튼 실험

<!--Like Button Start-->
<script>
var myApp = angular.module('myApp', [])
  .controller('Main', ['$scope', function($scope) {
    $scope.like = {};
    $scope.like.votes = 0;
    $scope.doVote = function() {
      if ($scope.like.userVotes == 1) {
        delete $scope.like.userVotes;
        $scope.like.votes--;
      } else {
        $scope.like.userVotes = 1;
        $scope.like.votes++;
      }
    }
  }]);
</script>

<style>
body{
  background: linear-gradient(to bottom,  #fff 0%, #eee 100%);
  font-size: 4em;
  height: 100vh;   
  .content{
    margin: 30% auto;
    text-align: center;
    a{
      color: gray;
      text-decoration: none !important;
      .glyphicon{
        transition: all .5s;
        &.glyphicon-heart{
          color: #e74c3c;
        }
        &.glyphicon-heart-empty{
          &:hover{
            transform:scale(1.1);
          }
        }
      }   
    }
  }
</style>

<!--Like Button HTML-->
<div class="container" ng-app="myApp" ng-controller="Main">
  <div class="content">
    <a href="#" ng-click="doVote()">
      <i class="glyphicon" ng-class="(like.userVotes==1) ? 'glyphicon-heart' : 'glyphicon-heart-empty'"></i>
      <span ng-model="like.votes">{{like.votes}}</span>
    </a>
  </div>
</div>