Angular formly - 从包装器中的字段获取模型

Question

我正在创建一个包装器，它将模型值显示为页面上的普通文本。当在此文本上触发鼠标悬停时，它将转换为表单字段，效果很好。我遇到的问题是，当在字段中进行编辑时，普通文本不会更改，所以如果可能的话，我如何从字段中获取模型的值？

I made a bin as an example of my problem.

包装器：

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

字段和型号：

vm.model = {textField: "Mouse over this field"};


vm.fields = [
  {
    key: 'textField',
    type: 'input',
    templateOptions: {
      label: 'Text Label',
      type: 'text',
      value:vm.model.textField
    }
  }];

Answer 1

使用 formly watchers 解决了问题。

Updated bin

与观察者的代码：

vm.fields = [
  {
    key: 'textField',
    type: 'input',
    templateOptions: {
      label: 'Text Label',
      type: 'text',
      value:vm.model.textField
    },
    watcher: {
      listener: function(field, newValue, oldValue, scope, stopWatching) {
        if(newValue) {
          field.templateOptions.value = newValue;
        }
      }
    }
  }];

Angular formly - 从包装器中的字段获取模型

Angular formly - Get model from field in wrapper

html

javascript

angularjs

angular-formly