Угловая форма - Фокус элемента

Question

У меня есть обертка для моих полей, которые преобразуют обычный текст в ввод при наведении мыши, у меня также есть каталог, который фокусируется на этом поле при его открытии.

Теперь я хочу, чтобы поле оставалось открытым до тех пор, пока я фокусируюсь на этом поле и преобразовываю обратно в обычный текст, если фокус становится ложным. Есть ли хороший способ сделать это?

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

Wrapper:

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

В мерно вы можете добавить ONBLUR и OnFocus я n templateOptions. Таким образом, вы можете добавить переменную с именем 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, чтобы вы могли более внимательно рассмотреть его.

Надеюсь, это было то, что вы искали.