Creating an edit-in-place in AngularJS

2015/08/11

Today we are going to create an edit in place directive for angularjs. Here you got a demo so you can see what it’s about or if you already have some knowledge about angular and just only want to read the code here its the repository

So, lets start building things. First, we need a simple structure for our project, and angular attributes so we can bootstrap it.

<!doctype html>
<html lang="en" ng-app="App">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-controller="main">
</body>
</html>

Now, we have to create our controller so we can bootstrap our app, and add an scope var to store our model.

var App = angular.module('App', [] );
	App.controller('main', function( $scope ){
		$scope.name = 'Federico';
	});

Then, we need to create a new file called edit-in-place.js where we are going to make our directive (im going to explain it after)

var App = angular.module('EditInPlace', []);
App.directive("clickToEdit", function() {
	var editorTemplate = '<div class="click-to-edit">' +
							'<div ng-hide="view.editorEnabled" ng-click="enableEditor()" class="click-to-edit-value">' +
								'{{value}} ' +
							'</div>' +
							'<div ng-show="view.editorEnabled">' +
								'<input class="click-to-edit-input" ng-model="view.editableValue">' +
								'<a ng-click="save()" class="click-to-edit-btn save">Save</a>' +
								'<a ng-click="disableEditor()" class="click-to-edit-btn close">Cancel</a>.' +
							'</div>' +
						'</div>';

	return {
		restrict: "A",
		replace: true,
		template: editorTemplate,
		scope: {
			value: "=clickToEdit",
		},
		controller: function($scope, $element) {
			$scope.view = {
				editableValue: $scope.value,
				editorEnabled: false
			};

			$scope.enableEditor = function() {
				$scope.view.editorEnabled = true;
				$scope.view.editableValue = $scope.value;
			};

			$scope.disableEditor = function() {
				$scope.view.editorEnabled = false;
			};

			$scope.save = function() {
				$scope.value = $scope.view.editableValue;
				$scope.disableEditor();
			};
		}
	};
});

Now im going to explain whats happening here.

In the first line, we are creating a module name EditInPlace to store our directive, and in the following one, we are declarating our directive called clickToEdit. After that, we declare a var with our template, which works the following way.

In our directive declaration we have to return an object with some properties ( You can read the docs for more info ), here we are returning the following ones:

Now, we have to append our script and inject it, so after our angular injection we are going to add our current file

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="edit-in-place.js"></script>

And in our app declaration we have to insert it as a dependency

var App = angular.module('Ingresos', ['EditInPlace'] );

Now we only need to add an element, add our new attribute and pass it our model of our scope

<span click-to-edit="name"></span>