angular input框點擊別處 變成不可輸入狀態

<input type="text" ng-model="edit" ng-disabled="!editable" focus-me="editable" ng-blur="editable=false">
<i class="kb-icon bpos-x0 bpos-y0 pull-right" ng-click="edit($index,$event)" ng-class='editable?"hide":""'></i>
$scope.editable=false;

 上面是一個輸入框，一開始是初始化是不可編輯狀態，點擊圖標<i>改變編輯狀態，當可編輯的時候<i>圖標會消失，然后點擊其他地方，input框就會自動保存，變回不可編輯狀態。這里用到的技術主要是ng-blur，判斷input框是否失焦，一旦失去焦點就改變editable為false.

這里的focus-me是一個directive，當變成可編輯狀態時，立即獲得焦點。

app.directive('focusMe', function () {
  return {
    restrict: 'A',
    scope: {
      focusMe: '='
    },
    link: function (scope, element, attr, ngModel) {    
      scope.$watch('focusMe', function (val) {
        if (val) {
          element[0].focus();
        }
      });
    }
  };
});