Jquery 用于HTTP验证的自定义指令，如果找到部分匹配项，则显示弹出窗口

我想将一个输入与服务端REST API进行匹配，看看它是否有效，但如果它无效（并且您当前正在键入），它可以提供一个选项列表供您选择

我已经在jQuery中实现了这一点，但需要在AngularJS中实现。作为控制器上的自定义指令或一组函数，这是最好的吗

如果我使用自定义指令路径，我将如何进行验证，并向（要显示的内容）提供列表。所有我能做的显示代码，我最关心的是如何构造和创建代码

（未测试/伪）代码

根据MonsiourToph（epic name）的建议，我创建了一个执行验证的指令，该指令有效，并且正在尝试使用自动建议列表的

typeahead

来执行，但当我实现这一点时，不会发生任何情况，决不会进行ajax调用，并且不会弹出框。我直接从示例中复制了代码（因此应该加载位置）

---

看看这个奇妙的模块：

尤其是页面底部的最后一项功能：Typeahead

据我所知，您的需求几乎就是您想要实现的（建议列表）

之后，使用自定义指令设置字段的有效性

---

编辑：

typeahead指令+ngModel的演示。$验证程序：

HTML:

<div ng-controller="myCtrl as c"> 
    <pre>scope.device = {{device}}</pre>
    <input id="deviceToOperateOn" 
           name="deviceToOperateOn" 
           type="text" 
           placeholder="Device Serial" 
           ng-show="operatesOnSelector == 1" 
           ng-model="device" 
           valid-device 
           ng-model-options="{ debounce: 200 }" 
           typeahead="value for value in values | filter:$viewValue" />
</div>

想想：

• 将“ui.bootstrap”添加到主模块依赖项注入
• 链接到引导css和角度引导js表
• RTFM。。。而不是虚拟复制粘贴代码，并抱怨：“它不工作”

顺便说一下，你的代码看起来真的很奇怪

---

正如我所说，POST动词不应该用于“检查”操作。如果您已经有了建议列表（=可能值列表），您甚至不需要请求服务器。

谢谢您的回答。。。Typeahead不起作用，因为我用的是Angular 1.3，bootstrap不起作用。其次，这还不是生产代码，我只是在测试，所以我把POST动词放在那里，只是为了在重构之前让它工作起来。我让它作为控制器的一部分工作，而不是使用自定义指令Odd，对我不起作用，而且：

    <input id="deviceToOperateOn"
           name="deviceToOperateOn"
           type="text"
           placeholder="Device Serial"
           ng-show="operatesOnSelector == 1"
           ng-model="device"
           ng-model-options="{ debounce: 200 }"
           valid-device="{{device}}"
           typeahead="address for address in getLocation($viewValue)" />

<div ng-controller="myCtrl as c"> 
    <pre>scope.device = {{device}}</pre>
    <input id="deviceToOperateOn" 
           name="deviceToOperateOn" 
           type="text" 
           placeholder="Device Serial" 
           ng-show="operatesOnSelector == 1" 
           ng-model="device" 
           valid-device 
           ng-model-options="{ debounce: 200 }" 
           typeahead="value for value in values | filter:$viewValue" />
</div>

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myCtrl', function ($scope) {
    $scope.operatesOnSelector = 1;
    $scope.device = '';
    $scope.values = [
        'phone', 'tv', 'desktop', 'washing machine'];
});

app.directive('validDevice', ['$http', function ($http) {
    return {
        require: 'ngModel',
        link: function (scope, ele, attrs, ngModel) {

            ngModel.$validators.validDevice = function (modelValue, viewValue) {
                var value = modelValue || viewValue;

                console.log('validator validDevice is running for value : ', value);
                console.log('set to : ', scope.values.indexOf(value) !== -1);
                return scope.values.indexOf(value) !== -1;

            };

        }
    }
}]);