Angularjs x可编辑控件在完成或取消后会失去焦点

angularjs x editable controls lose focus after done or cancel

本文关键字：取消后 失去 焦点 编辑 控件 Angularjs      更新时间：2023-09-26

我有基本的x可编辑控件，如输入字段或选择。我只是希望在完成控制后保持焦点。

template: 

 <div ng-controller="Ctrl">
      <a href="#" editable-text="user.name" e-onblur="console.log(this);">{{ user.name || 'empty' }}</a>
    </div>

controller: 

app.controller('Ctrl', function($scope, $filter) {
   $scope.user = {id: 1, name: 'name1'};
});

请查看问题的实时版本:
http://plnkr.co/edit/BjWwXIlYyyLvRnVwO8m8?p=preview

我添加了一个模糊功能，但我似乎不能正确地修改它。如果有其他的解决方案，我想知道。

@heyNow，解决方案的大纲是这样的:

  1. 创建一个非隔离的'focus'指令，并将其应用于link元素。这应该是一个布尔值，其中true设置焦点
  2. 创建一个onhide函数，使'focus'指令中的条件为true
  3. 创建一个'unsetFocus'函数，该函数将'focus'条件设置为false，并且应该使用ng-blur和onshow来调用。
这里是html 
 <a href="#" onhide="onhide(user)" onshow="unsetFocus()" 
        ng-blur="unsetFocus()" focus="focusObj==user" 
        editable-text="user.name">
        {{ user.name || 'empty' }}
 </a>

和指令和控制器:

app.directive('focus', function($timeout) {
  return {
    scope: false,
    link: function(scope, element, attrs) {
      scope.$watch(attrs.focus, function(newval,oldval) {
        if (newval) { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
    }
  };
});
app.controller('Ctrl', function($scope, $filter) {
  $scope.user = {
    name: 'awesome user',
    status: 2
  };
  $scope.onhide = function(obj) {
    $scope.focusObj = obj;
  }
  $scope.unsetFocus = function() {
    $scope.focusObj = null;
  }
}

点击查看

相关文章：