Question

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

这样没问题，但我想使用ngModel指令进行绑定，所以我可以使用类似的东西

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

而不是我目前作为魅力的方法

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

我无法确定是否可以更改＆＃34;目标＆＃34;在指令内部使用ng-model，这样我得到了输入的输入，然后能够在选择源的结果时设置外部模型。

Answer 1

使用ngModelOptions指定何时将输入文本绑定到模型：

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

您可以触发不同的事件，但在这种情况下，只有当最终用户从字段中离开焦点时，文本才会绑定到模型。

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

Answer 2

就像@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>

仅当您单击提交按钮时，才会将值绑定到模型。这当然可以放在任何你喜欢的地方。

Answer 3

我在查看旧版的checkbox-list模块后找到了解决方案。

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

我已经为其他人更新了plunker以查看原型：http://plnkr.co/edit/LbHH2pJGX1Iii8ZqqSie?p=preview

（Stack要求我发布代码 - 所以这里是）

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

在ngModel上延迟绑定

3 个答案: