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();
}
});
}
};
});