将 devextreme 文本值绑定到角度模型（在 keydown 上）答案

【问题标题】：Bind devextreme text value to angular model (on keydown)将 devextreme 文本值绑定到角度模型（在 keydown 上）
【发布时间】：2017-01-10 15:23:51
【问题描述】：

我刚刚开始试用 DevExtreme HTML 组件。目前，我正在尝试使用 AngularJS 和 DevExtreme 制作一个简单的搜索表单。

我想按 Enter 提交搜索表单。问题是小部件似乎只在我跳出该字段时才更新角度模型（大概是 onValueChanged 事件）。

在下面的代码中，我观察到searchData.q 的值仅在跳出字段时才会发生变化。因此，当在onKeyChange 事件中提交表单时，它使用的是之前的文本值。文本框以这种方式操作似乎有点违反直觉，绝对基础角度不适用于 ng-model...

有谁知道如何修复它以便正确绑定值？

<form id="HeaderSearchForm" ng-submit="search">
   <div dx-form="searchFormOptions"></div>
</form>
<pre>
{{searchData | json}}
</pre>

在角度控制器中：

app.controller('HeaderCtrl', ['$scope', 'authorityService', function ($scope, authorityService) {
  var execSearch, searchData = {}, searchFormOptions;

  $scope.searchFormOptions = {
    formData: searchData,
    items: [{
      dataField: 'q',
      label: {
        text: 'Search'
      },
      bindingOptions: {
        "formData.q": "searchData.q"
      },

      editorOptions: {
        mode: 'search',
        placeholder: 'Enter a search query',
        onKeyDown: function(e){
          var keyCode = e.jQueryEvent.which;
          if (keyCode === 13){
            search();
          }
        }
      }
    }]
  };

  search = function(){
    alert('searching for ' + searchData.q);
  };

  $scope.searchData = searchData;
  $scope.search = search;

}]);

【问题讨论】：

发现了这个问题：stackoverflow.com/questions/26842378/… - 尝试在超时中包装搜索函数，它有效，值在函数调用之前更新，但似乎有点 hacky。也许是更好的方法？

标签： devextreme

【解决方案1】：

valueChangeEvent 选项对您的情况很有帮助。改成keydown:

editorOptions: {
    mode: 'search',
    placeholder: 'Enter a search query',
    onKeyDown: function(e) {
        //...
    },
    valueChangeEvent: "keydown"
}

也可以查看sample。

【讨论】：

哦，我明白了，它被设置为一个选项。到目前为止，这似乎是一个非常好的框架。非常感谢谢尔盖。