AngularJS - Click to Edit Directive
HTML
<div ng-app="inplaceTest">
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="entry in entries">:
<inplace model="entries[$index]" />
</li>
</ul>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<style>
a {
margin: 0 10px !important;
}
JavaScript
// http://chandermani.blogspot.co.nz/2012/12/angularjs-and-inplace-edit.html
//Include angular-ui dependency in resources on the side and as 'ui'
angular.module('inplaceTest', ['ui'])
.controller("MyCtrl", function ($scope) {
$scope.entries = ['Lorem Ipsum1', 'Lorem Ipsum2', 'Lorem Ipsum3'];
$scope.singleEntry = "Single Lorem Ipsum";
})
.directive('inplace', function () {
return {
restrict: 'E',
replace: true,
scope: {
model: '='
},
controller: function ($scope) {},
template: '<span>' +
'<span class="c1" ng-hide="editorEnabled"' +
'ng-click="enableEditor();">{{model}}</span>' +
'<input ng-show="editorEnabled" ng-model="editModel"' +
'ng-required ui-keypress="{13: \'finishedEdit()\'}"' +
'ui-event="{\'blur\': \'finishedEdit()\'}"/>' +
'<a class="button tiny" ng-click="removeFn(model)"> DEL</a>' +
'</span>',
// The linking function will add behavior to the template
link: function (scope, element, attrs) {
scope.editorEnabled = false;
scope.finishedEdit = function () {
scope.model = angular.copy(scope.editModel);
scope.editorEnabled = false;
};
scope.enableEditor = function () {
scope.editModel = angular.copy(scope.model);
scope.editorEnabled = true;
setTimeout(function() {
element.find('input')[0].focus();
//element.find('input').focus().select(); // w/ jQuery
});
};
}
}
});