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

Question

我有基本的 x 可编辑控件，例如输入字段或 select。我只是希望在完成控制后保持专注。

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

我添加了一个模糊功能，但我似乎无法正确修改它。如果还有其他解决办法，我想知道。

Answer 1

@heyNow，解决方案的概要是这样的：

创建一个非隔离 'focus' 指令并将其应用于 link 元素。这应该采用布尔值，其中 true 设置焦点
创建一个 onhide 函数，使 'focus' 指令中的条件为真
创建一个 '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;
  }
}

查看 this plunk

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

angularjs x editable controls lose focus after done or cancel

javascript

onblur

onsubmit

angularjs

x-editable