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

Bret Lowrey

Code is like a war - the best code is one never written.

Florida, USA