Edit in place with Angular 1.5
I was looking to add edit-in-place functionality to an Angular app I was working on. I found a few libraries but it seemed like overkill for what should be an extremely small directive.
app.directive('editAction', function() {
return {
restrict: "A",
link: function($scope, element, attrs) {
element[0].focus();
element.prop("onblur", function() {
var action = $scope.$eval(attrs.editAction);
action(element[0].value);
});
}
};
});
I came up this. If you put this directive on an input field as an attribute, it will focus on it and then perform a given function when the user exits out of the input. This allows you to drive most of the logic for when you want to show/hide text vs the input box in a controller or component, where the display logic actually lives.
Check it out with this demo: JSFiddle