角形形式 - 元素焦点

Question

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

现在我希望该字段保持打开,只要我专注于该字段并且如果焦点变为假,则转换回正常文本.有没有办法做到这一点？

我有一个目前得到的东西.

包装:

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

在formly中,您可以在templateOptions中添加onBlur和onFocus.因此,您可以添加一个名为的变量focused,并将onBlur设置为falseon和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,你可以仔细看看它.

希望这是你想要的.