Question

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

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设置焦点
创建一个隐藏功能，使'focus'指令中的条件为真
创建一个'unsetFocus'函数，将'焦点'条件设置为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可编辑控件在完成或取消后失去焦点

1 个答案: