Angular: Editable directive

http://angularjs.org/

by Saulzar

HTML

<script src="http://code.angularjs.org/angular-1.0.0.js"></script>
<html ng-app="my">
<div ng-controller="MyCtrl">
    <ng-switch on="edit" ng-mouseover="enableEdit()" ng-mouseout="disableEdit()">
        
        <div ng-switch-when="true">
            <input ng-model="$parent.name" unfocus="disableEdit()"></input>         
        </div>
        
        <div ng-switch-default ng-click="enableEdit()">
        {{name}}
        </div>
        
      </ng-switch>
            <hr>
    <input ng-model="name" unfocus="disableEdit()"></input> 
            {{name}}
     </div>
</html>

CSS

.editable {
    border: 1px solid red;
}

JavaScript

var module = angular.module("my", []);

module.directive ('unfocus', function() { return {

  restrict: 'A',
  link: function (scope, element, attribs) {
      
    element[0].focus();
      
    element.bind ("blur", function() {
        scope.$apply(attribs["unfocus"]);
      });
                                   
  } 
    
} });

function MyCtrl($scope) {
    $scope.name= "Freewind";

    $scope.enableEdit = function() { $scope.edit = true; }
    $scope.disableEdit = function() { $scope.edit = false;  }

}