Angular formly - 在 templateOptions 变量上设置观察者答案

【问题标题】：Angular formly - Set watcher on templateOptions variableAngular formly - 在 templateOptions 变量上设置观察者
【发布时间】：2016-02-23 12:27:54
【问题描述】：

我想设置一个观察者，当模板选项中的特定值发生变化时，该观察者将为该字段运行一个函数。当您想知道输入已更改时，可以使用普通的正式观察程序，因此在我的情况下不起作用。我已经尝试过 expressionProperties ，但我无法让它工作。

我以js Bin 为例。当您将鼠标悬停在一个字段上时，有两个输入字段 templateOptions.mouseOver 变为真，鼠标离开时，mouseOver 布尔值变为假。我该怎么做才能在 mouseOver 更改时运行函数？

【问题讨论】：

标签： javascript html angularjs angular-formly

【解决方案1】：

如果你想为每个单独的字段做一个控制器，你可以简单地在字段上放置一个控制器，或者你可以把它放在模板本身如果每个字段的功能相同，在指定一个函数后运行ng-mouseOver。像这样：

formlyConfigProvider.setWrapper([

      {
        template: [
                    'editorEnabled: {{to.editorEnabled}}',
                    '<div ng-mouseover="to.editorEnabled=true; Update()" ng-mouseleave="to.editorEnabled=false; Update()">',
                        '<formly-transclude></formly-transclude>',
                    '</div>'
                ].join(' '),
        controller: function($scope) {
           $scope.Update = function() {
              //Code to run when value changes
           }
        }
      }
    ]);

如果您在每个单独的字段中执行此操作（如果您要调用的函数对于每个字段都不同），您会这样做：

vm.fields = [
      {
        key: 'textField1',
        type: 'input',
        templateOptions: {
          label: 'Input1',
          type: 'text',
          value:vm.model.textField1,
          editorEnabled: false
        },
        controller: function($scope) {
          $scope.Run = function() {
             alert('Changed!');
          }
        }
      },

【讨论】：