imaimiami/angular_sample.html

## angular_sample.html
<!doctype html>
<html ng-app="app">
  <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="old_tools.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular-animate.min.js"></script>
    <script src="tools.js"></script>
    <style>
      body{ padding: 10px; }
      fieldset{ border: none; }
      .animate.ng-enter {
        -webkit-transition: 0.3s linear all;
        transition: 0.3s linear all;
        opacity: 0;
        margin-left: -100px;
      }
      .animate.ng-enter.ng-enter-active {
        opacity: 1;
        margin-left: 0;
      }
    </style>
  </head>
  <body>
    <div ng-controller="ToolListCtrl">
      <fieldset>
        <label>あなたの名前:</label>
        <input type="text" ng-model="name">
      </fieldset>
      <h2>{{name}}が語る{{tools.length}}種の神器</h2>
      <ul>
        <li ng-repeat="tool in tools" class="animate">
          <span>{{tool.name}}</span>
          <select class="big-select" big-select="Nice" ng-model="tool.like">
            <option value="">どのくらい好き？</option>
            <option value="normal">いや、普通に</option>
            <option value="straw">ストローで飲むくらい好き</option>
          </select>
        </li>
      </ul>
      <form ng-submit="addTool()">
        <input type="text" ng-model="todoText">
        <input type="submit" value="add">
      </form>
    </div>
  </body>
</html>

## old_tools.js
$(function(){
  $(".big-select").css({height: "50px", width: "160px"}).on("change", function(){
    alert("GoodChoice!");
  });
});

## tools.js
var ToolApp = angular.module('app', ["ngAnimate"]);

ToolApp.directive('bigSelect', function() {
  return {
    restrict: 'A',
    link: function postLink(scope, element, attrs) {
      element.on("change", function(){
        alert(attrs.bigSelect);
      });
    }
  };
});

ToolApp.controller('ToolListCtrl', ["$scope", function ($scope) {
  $scope.tools = [
    {'name': 'Redmine'},
    {'name': 'Jenkins'},
    {'name': 'Chef'}
  ];

  $scope.addTool = function() {
    $scope.tools.push({'name': $scope.todoText});
    $scope.todoText = null;
  }
}]);
	<!doctype html>
	<html ng-app="app">
	<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="old_tools.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular-animate.min.js"></script>
	<script src="tools.js"></script>
	<style>
	body{ padding: 10px; }
	fieldset{ border: none; }
	.animate.ng-enter {
	-webkit-transition: 0.3s linear all;
	transition: 0.3s linear all;
	opacity: 0;
	margin-left: -100px;
	}
	.animate.ng-enter.ng-enter-active {
	opacity: 1;
	margin-left: 0;
	}
	</style>
	</head>
	<body>
	<div ng-controller="ToolListCtrl">
	<fieldset>
	<label>あなたの名前:</label>
	<input type="text" ng-model="name">
	</fieldset>
	<h2>{{name}}が語る{{tools.length}}種の神器</h2>
	<ul>
	<li ng-repeat="tool in tools" class="animate">
	<span>{{tool.name}}</span>
	<select class="big-select" big-select="Nice" ng-model="tool.like">
	<option value="">どのくらい好き？</option>
	<option value="normal">いや、普通に</option>
	<option value="straw">ストローで飲むくらい好き</option>
	</select>
	</li>
	</ul>
	<form ng-submit="addTool()">
	<input type="text" ng-model="todoText">
	<input type="submit" value="add">
	</form>
	</div>
	</body>
	</html>
	$(function(){
	$(".big-select").css({height: "50px", width: "160px"}).on("change", function(){
	alert("GoodChoice!");
	});
	});
	var ToolApp = angular.module('app', ["ngAnimate"]);

	ToolApp.directive('bigSelect', function() {
	return {
	restrict: 'A',
	link: function postLink(scope, element, attrs) {
	element.on("change", function(){
	alert(attrs.bigSelect);
	});
	}
	};
	});

	ToolApp.controller('ToolListCtrl', ["$scope", function ($scope) {
	$scope.tools = [
	{'name': 'Redmine'},
	{'name': 'Jenkins'},
	{'name': 'Chef'}
	];

	$scope.addTool = function() {
	$scope.tools.push({'name': $scope.todoText});
	$scope.todoText = null;
	}
	}]);