ngModel上的延迟绑定

我正在尝试创建一个typeahead指令，该指令不会在输入时将键入的文本绑定到模型。ngModel上的延迟绑定

这是因为这种没问题，但我想用ngModel指令对我的约束力，所以我可以使用类似的东西来

<input type="text" ng-model="model.field" typeahead="sourceForTypeahead" />

，而不是我这可以作为一个魅力

电流的方法

<input type="text" ng-model="tmpFieldForInput" typeahead="sourceForTypeahead" typeahead-model="model.field" />

是否有可能从内部改变NG-模型的“目标”的指令我想不通，所以我得到了打字输入，然后能够将外部模型时，从一个结果源被选中。

来源

2015-11-19 Torben Pi Jensen

在查看旧版本的复选框列表模块后，我找到了一个解决方案。

解决方法是在编译时更改ngModel属性，并使其指向指令中的内部属性，然后在后链接方法中进行编译。

我已经更新了plunker给别人看的原型：http://plnkr.co/edit/LbHH2pJGX1Iii8ZqqSie?p=preview

（堆栈需要我张贴的代码 - 所以这里是）

app.directive('typeahead', ['$parse', '$compile', function ($parse, $compile) { 
    return { 
     priority: 1000, 
     terminal: true, 
     scope: { 
      source: '=typeahead', 
      ngModel: '=' 
     }, 
     compile: function(tElement, tAttrs) { 
      tElement.removeAttr("typeahead"); 
      tElement.attr("ng-model", "searchTerm"); 

      return function(scope, element, attrs) { 
       $compile(element)(scope); 
       // all my logic here

来源

2015-11-22 19:54:52

使用ngModelOptions指定当你想输入文本到模型绑定：

<input type="text" ng-model="myModel" ng-model-options="{ updateOn: 'blur' }"> 
<p>Hello {{myModel}}!</p>

有不同的事件可以触发，但在这种情况下，文本将仅结合该模型一旦终端用户将焦点从现场移开。

其他资源：https://docs.angularjs.org/api/ng/directive/ngModelOptions

来源

2015-11-19 21:00:02 lux

此外，您还可以检查NG-模型选项=“{debounce：2000}”。这是更新模型，键入后延迟2秒。这个东西对typeahead很有用。 –

尽管源数组包含[“Test”，“Build”]，这仍然会将“tes”绑定到模型上。也许自定义验证是要走的路，然后阻止提交无效数据？我最大的问题是源数组可能更复杂，例如[{“name”：“Test”，“id”：1}，{“name”：“Build”，“id”：2}]因此我希望用户选择其中一个复数值 - 但是在这里，我可能能够使用setViewValue –

和$ scope。$ watch（“myModel”，function（newValue，oldValue）{}）仍然会对“无效”modelValue作出反应：/ –

像@lux提到，去做正确的方法是使用ng-model-options

但在你的情况下，理想的解决办法是做包装你输入的形式和绑定上提交：

<form name="myForm"> 

<input type="text" ng-model="myModel" ng-model-options="{ updateOn: 'submit' }"> 
<p>Hello {{myModel}}!</p> 
<input type="submit" value="Submit"> 
</form>

这将值绑定到模型只有当你点击你的提交按钮。这当然可以放在任何你喜欢的地方。

来源

2015-11-19 21:22:39 nikjohn

ngModel上的延迟绑定

回答

相关问题