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，大家可以仔细看看

希望这就是您要找的。

Angular 正式 - 元素焦点

Angular formly - Element focus

html

javascript

angularjs

angular-formly