Tags Directive -- AngularJS

Github: https://github.com/CarterTsai/tags_directive

CodePen : http://codepen.io/CarterTsai/pen/hLdwf


我簡單設計了一個tags的directive，但這是第一版而已，未來會慢慢增加他的功能
AngularJS真的滿不錯用。

Check out this Pen!

<div ng-app="app">
  <div ng-controller="BcCtrl">
    <div>
      <input type="input" tags="m_tags" />
    </div>
</div>
                                                                                  Check out this Pen!

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,700);

$tag_padding : 3px 3px 3px 3px;

.wrapper_tag{
  margin-top : 20px;
}

.tags_type{
  width:100%;                                            
  height:100%;        
  margin-right: 5px;
  padding: $tag_padding;
  background-color: #caca1a;
 
  font-family: 'Titillium Web', sans-serif;
  
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
   border-radius: 15px;
}Check out this Pen!

var app = angular.module('app', []);

function BcCtrl($scope){
  $scope.m_tags = ["AngularJS", "Pure", "Javascript",
                 "Hello World", "Taiwan", "Working"];
}

// tags
app.directive('tags', function() {return {
      restrict: 'AEC',
      transclude: true,
      scope: {tags:'=tags'},
      controller: function($scope, $element) {
        $scope.inTag = "";
        
        $element.find('input')[0].onkeydown = function(e){
            if(e.keyCode === 13){
              $scope.$apply(function(){
                $scope.tags.push($scope.inTag);
                $scope.inTag="";
              });
            }
        }
      },
      template:'<div class="wrapper_tag"> <input ng-model="inTag"></input>' +
          '<span class="tags_type" ng-repeat="tag in tags">{{tag}}</span></div>',
      replace: true
    };
});
Check out this Pen!