Javascript 通过摘要运行验证指令

此指令用于确定给定值是否在与其关联的数据列表中。当我在输入中键入时，它可以很好地工作，但如果数据列表由于$digest循环（向其添加值）而发生更改，它将无法工作。如果我随后更新输入，它将正常运行

app.directive('list', function (){
    return {
        restrict: "A",
        require: "ngModel",
        priority: 100,
        link: function(scope, elem, attr, ngModel){
            var list;

            //For DOM -> model validation
            ngModel.$validators.list = function(value){
                if(!list){
                    var options = document.getElementById(attr.list).options;
                    var list = [];
                    for(var i=options.length-1; i>=0; i--){
                        if(isString(options[i].getAttribute("valid"))){
                            if(options[i].label){list.push(options[i].label.toLowerCase())}
                            if(options[i].value){list.push(options[i].value.toLowerCase())}
                        }
                    };
                }
                var valid = (value||!value==""?list.indexOf(value.toLowerCase()) !== -1:true);
                return (!list.length)||valid;
            };
        }
    };
});

---

您需要查看列表，然后触发

ngModel.$validate（）然后将运行验证管道

app.directive('list', function (){
    return {
        restrict: "A",
        require: "ngModel",
        priority: 100,
        link: function(scope, elem, attr, ngModel){
            var list;


        scope.$watch(function () {
            return $parse(attrs.list)(scope);
        }, function () {
            ngModel.$validate();
        });


            //For DOM -> model validation
            ngModel.$validators.list = function(value){
                if(!list){
                    var options = document.getElementById(attr.list).options;
                    var list = [];
                    for(var i=options.length-1; i>=0; i--){
                        if(isString(options[i].getAttribute("valid"))){
                            if(options[i].label){list.push(options[i].label.toLowerCase())}
                            if(options[i].value){list.push(options[i].value.toLowerCase())}
                        }
                    };
                }
                var valid = (value||!value==""?list.indexOf(value.toLowerCase()) !== -1:true);
                return (!list.length)||valid;
            };
        }
    };
});

你真的需要阅读这篇关于如何“用角度思考”的文章

某个地方有一个
，您正在通过
列表
属性将其id传递给指令。我想这很接近你所拥有的：

<datalist id="myDatalist">
  <options ng-repeat="item in items" value="{{item.value}}">{{item.label}}</options>
</datalist>

<input ng-model="foo" list="myDatalist">

然后该指令的用法如下所示：

<input ng-model="foo" list="items">



这不仅会使用Angular来监视底层数据中的更改，还会将您的逻辑与DOM分离，因此如果您决定稍后更改ID，或者在不使用
s的情况下使用其他元素，则您的指令不会更改。
不会更改，因为没有触发器（键入或其他摘要事件时除外）重新运行验证。为什么要将元素id传递给
列表
？传递构建选项的实际虚拟机-然后你可以观察它的变化。尽可能接近标准…这意味着什么？在某个地方，您有一个
选择
，您可以直接从DOM获得它的选项。理想情况下，
select
本身应该由VM属性驱动-您应该直接获取该属性，而不是从DOMIt is数据列表的is。。。我可以从ng repeat中提取它…你不需要从任何地方“提取”它。您的控制器中已经有了它-通过一个隔离作用域将它传递给您的指令。作用域。$watch（函数（）{…}）意味着，将在每个摘要周期上评估该手表？@Akxe，是的，所有手表都在每个摘要周期上评估
<input ng-model="foo" list="items">