arahansa/angualr.jsp

## angualr.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="testApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Happy coding : Angular</title>
<style>
	div.reply { margin-bottom: 10px; }
</style>
</head>
<body ng-controller="replyController">
<h1>Hello Angular</h1>

<h4>댓글 입력</h4>
	닉넴 : <input type="text" name="author" id="author" ng-model="reply.author"> ,
	내용 : <input type="text" name="comment" id="comment" ng-model="reply.comment">
	<button ng-click="submit(reply)">전송!</button>
<hr>
<h4>댓글 내용 ({{replies.length }} 개의 댓글)</h4>
<div id="replyContent">
	<my-reply ng-repeat="reply in replies"></my-reply>
</div>


<script src="/js/lib/jquery-1.11.3.min.js"></script>
<script src="/js/lib/angular.min.js"></script>
<script>
var originalString =
	' <span class="comment"> {{reply.comment}} </span>'+
	' <button ng-click="modifyForm( $event )">수정</button>'+
	' <button ng-click="del($index)">삭제</button>';

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

app.controller('replyController', function ($scope, $http) {
	$scope.replyCount=1;
	$scope.replies = [
	                  {"replyId": 0, "author": "아라한사", "comment": "하하하"},
	                  {"replyId": 1, "author": "아라한사22", "comment": "하하하22"}
	                  ];

	$scope.submit = submit;
	$scope.tempContent = "";


	function submit(reply){
		$scope.replyCount++;
		reply.replyId = $scope.replyCount;
		$scope.replies.push(angular.copy(reply));
	}


})
.directive('myReply', function($compile){
	return {
		restrict: 'E',
		replace : true,
		template:
			'<div class="reply" data-id="{{reply.replyId}}">'+
			' <span class="author"> {{reply.author}} : </span>'+
			' <span class="comment"> {{reply.comment}} </span>'+
			' <button ng-click="modifyForm( $event )">수정</button>'+
			' <button ng-click="del($index)">삭제</button>'+
			'</div>',
		link: function(scope, element){
			scope.modifyForm = function modifyForm(event){
				var obj = event.currentTarget;
				$(obj).closest("div.reply").attr("status", "modifying");
				scope.tempContent = $(obj).prev().text();
				$(obj).prev().replaceWith($compile('<update-form></update-form>')(scope));
				$(obj).next().remove();
				$(obj).remove();
			};
			scope.del = function del(index){
				scope.replies.splice(index ,1);
			};
		}
	}
})
.directive('updateForm', function($compile){
	return {
		restrict: 'E',
		template :
			'<textarea id="updatedComment">{{reply.comment}}</textarea>'+
			'<button ng-click="update(reply)">수정!</button>'+
			'<button ng-click="cancelUpdate(this)">취소</button>',
		link: function(scope, element) {
			scope.update = function update(reply){
				$(element).closest("div.reply").removeAttr("status");
				reply.comment = $("#updatedComment").val();
				$(element).replaceWith($compile('<div original-view></div>')(scope));
			};
			scope.cancelUpdate = function cancelUpdate( obj ){
				console.log(obj);
			};
		}
	}
});


app.directive('originalView', function($compile){
	return{
		restrict: 'EAMC',
		template :
			' <span class="comment"> {{reply.comment}} </span>'+
			' <button ng-click="modifyForm( $event )">수정</button>'+
			' <button ng-click="del($index)">삭제</button>'
	};
});


</script>
</body>
</html>
	<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html ng-app="testApp">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Happy coding : Angular</title>
	<style>
	div.reply { margin-bottom: 10px; }
	</style>
	</head>
	<body ng-controller="replyController">
	<h1>Hello Angular</h1>

	<h4>댓글 입력</h4>
	닉넴 : <input type="text" name="author" id="author" ng-model="reply.author"> ,
	내용 : <input type="text" name="comment" id="comment" ng-model="reply.comment">
	<button ng-click="submit(reply)">전송!</button>
	<hr>
	<h4>댓글 내용 ({{replies.length }} 개의 댓글)</h4>
	<div id="replyContent">
	<my-reply ng-repeat="reply in replies"></my-reply>
	</div>



	<script src="/js/lib/jquery-1.11.3.min.js"></script>
	<script src="/js/lib/angular.min.js"></script>
	<script>
	var originalString =
	' <span class="comment"> {{reply.comment}} </span>'+
	' <button ng-click="modifyForm( $event )">수정</button>'+
	' <button ng-click="del($index)">삭제</button>';

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

	app.controller('replyController', function ($scope, $http) {
	$scope.replyCount=1;
	$scope.replies = [
	{"replyId": 0, "author": "아라한사", "comment": "하하하"},
	{"replyId": 1, "author": "아라한사22", "comment": "하하하22"}
	];

	$scope.submit = submit;
	$scope.tempContent = "";


	function submit(reply){
	$scope.replyCount++;
	reply.replyId = $scope.replyCount;
	$scope.replies.push(angular.copy(reply));
	}


	})
	.directive('myReply', function($compile){
	return {
	restrict: 'E',
	replace : true,
	template:
	'<div class="reply" data-id="{{reply.replyId}}">'+
	' <span class="author"> {{reply.author}} : </span>'+
	' <span class="comment"> {{reply.comment}} </span>'+
	' <button ng-click="modifyForm( $event )">수정</button>'+
	' <button ng-click="del($index)">삭제</button>'+
	'</div>',
	link: function(scope, element){
	scope.modifyForm = function modifyForm(event){
	var obj = event.currentTarget;
	$(obj).closest("div.reply").attr("status", "modifying");
	scope.tempContent = $(obj).prev().text();
	$(obj).prev().replaceWith($compile('<update-form></update-form>')(scope));
	$(obj).next().remove();
	$(obj).remove();
	};
	scope.del = function del(index){
	scope.replies.splice(index ,1);
	};
	}
	}
	})
	.directive('updateForm', function($compile){
	return {
	restrict: 'E',
	template :
	'<textarea id="updatedComment">{{reply.comment}}</textarea>'+
	'<button ng-click="update(reply)">수정!</button>'+
	'<button ng-click="cancelUpdate(this)">취소</button>',
	link: function(scope, element) {
	scope.update = function update(reply){
	$(element).closest("div.reply").removeAttr("status");
	reply.comment = $("#updatedComment").val();
	$(element).replaceWith($compile('<div original-view></div>')(scope));
	};
	scope.cancelUpdate = function cancelUpdate( obj ){
	console.log(obj);
	};
	}
	}
	});



	app.directive('originalView', function($compile){
	return{
	restrict: 'EAMC',
	template :
	' <span class="comment"> {{reply.comment}} </span>'+
	' <button ng-click="modifyForm( $event )">수정</button>'+
	' <button ng-click="del($index)">삭제</button>'
	};
	});





	</script>
	</body>
	</html>