javascript - Angular 形式 - 元素焦点

Question

我的字段有一个包装器，可在鼠标悬停时将普通文本转换为输入，我还有一个目录，在打开时将焦点设置在该字段上。

现在我希望只要我专注于该字段，该字段就保持打开状态，如果焦点变为假，则转换回普通文本。有什么好的方法吗？

I have a bin of what i got at the moment.

包装器:

template: [
                '<div ng-hide="to.editorEnabled" >',
                    '<div ng-mouseover="to.editorEnabled=true">',
                        '{{to.label}}</br>',
                        '{{to.value}}',
                    '</div>',
                '</div>',
                '<div focus-me="to.editorEnabled" ng-show="to.editorEnabled">',
                    '<formly-transclude></formly-transclude>',
                '</div>'
            ].join(' ')

焦点指令:

app.directive('focusMe', function($timeout, $parse) {
  return {
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        console.log('value=',value);
        if(value === true) { 
          $timeout(function() {
            element[0].firstElementChild.focus(); 
          });
        }
      });
    }
  };
});

表格字段:

key: 'textField',
        type: 'input',
        templateOptions: {
          label: 'Text',
          type: 'text',
          value:vm.model.textField
        },
        watcher: {
          listener: function(field, newValue, oldValue, scope, stopWatching) {
            if(newValue) {
              if(!newValue || newValue === "") {
                field.templateOptions.value = "Undefined";
              }
              else {
                field.templateOptions.value = newValue;
              }
            }
          }
        }
      }];

Answer 1

形式上可以在templateOptions中添加onBlur和onFocus。所以你可以添加一个名为 focused 的变量, onBlur 将其设置为 false onFocus 将其设置为 true .

templateOptions: {
      onBlur:'to.focused=false',
      onFocus:'to.focused=true',
      focused:'true'
},

在指令中添加了两个作用域变量model和 fucus .那里model是你调用的变量 to.editorEnabled和 focus将是新创建的变量 to.focused .

scope: {
        model:'=',
        focus:'='
}

稍后在您的指令中，您可以为 focused 添加一个额外的观察者多变的。 scope.$watch("focus", function(value) {
if(!scope.focus){
scope.model=false;
}
});因此，如果失去焦点，它会设置 scope.model为 false，这会使输入消失。

还做了一个JS Bin所以你可以仔细看看它。

希望这就是您要找的。