20140228-fff-angular-04-waowao

<!DOCTYPE html>
<html ng-app="app" lang="ja">

  <head>
    <meta charset="UTF-8" />
    <link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script data-require="angular-animate@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <section ng-controller="AgemonPageCtr" class="page">
      <h1 class="selected-label-hader" >
        <span>I love {{agemonoName}}.</span>
        <span 
          class="glyphicon glyphicon-thumbs-up"
          wao-wao="agemonoName" ></span>
      </h1>
      <div class="btn-group" ng-repeat="agemon in agemonList">
        <button class="btn btn-default" ng-click="onSelect(agemon)">
          {{agemon.name}}
        </button>
      </div>
    </section>
  </body>

</html>

// app というmodule名前空間を作成
angular.module("app", []);

// app moduleにdirectiveを追加
angular.module("app").
  directive( "waoWao", function( $timeout){
    return {
      restrict:"A",
      scope: { value: "=waoWao" },
      template: '<div class="my-pop" style="display:none;" >' +
                '{{value}}イイヨ！</div>',
      link:  function(scope, element, attrs){
        var $myPop = element.find('.my-pop');
        element.on("click",function(){
          $myPop.show();
          console.log("myPop:" + $myPop);
          $timeout(function () {
            $myPop.hide();
          }, 1000);
        });
      }
    }
  });

// app moduleにcontrollerを追加
angular.module("app").
  controller("AgemonPageCtr",function($scope){
    $scope.agemonoName = "none..";
    $scope.agemonList = [
      { "name":"くしかつ" },
      { "name":"とんかつ" },
      { "name":"からあげ" },
      ];
    $scope.onSelect = function(agemon){
      $scope.agemonoName = agemon.name;
    }
  });

/* Styles go here */
body{
  font-size:14px;
  background-color: rgb( 248, 250, 244);
}
.page{
  padding:16px;
}

.selected-label-hader{
  margin: 24px 0;
  padding: 4px 8px;
  border-bottom: solid 1px rgba( 0, 0, 0, 0.2);
}

.my-pop{
  position:absolute;
  /* left:0; right:0; */
  width: 400px;
  height:100px;
  z-index:10;
  color:white;
  text-align:center;
  line-height:100px;
  background-color:rgba( 0, 0, 0, 0.5);
}