angular input框点击别处变成不可输入状态

2024-10-19 22:29:13

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

        }

      });

    }

  };

});

最新文章

热门文章