javascript - 当在选择项中找不到模型值时，将类添加到输入

Question

我想为输入元素创建一个指令，该指令会检查相应的datalist，并在该值不在datalist中时添加一个类。

由于list属性是相应datalist的id，所以我使用了这个:

app.directive('listCheck', function() {
    return{
        restrict: 'A',
        link: function(scope, element, attrs) {
            var options = document.querySelectorAll("#"+attrs.list+">option[ng-repeat]");
            //used as this since the list shouldn't change...
            console.log(options);    // <- return []
            //although the querySelector is all right
            //[ng-repeat] is used to remove the void options
        }
    }
});

HTML 看起来像:

<input list="dataMatter" ng-model="hourBox.matter">
<datalist id="dataMatter">
    <option ng-repeat="matter in Matter" value="{{matter.short}}">{{matter.name}}</option>
    <option value="(anything)">New matter</option>
</datalist>

看起来，我需要将指令初始化推迟到编译完成之后，但我真的不想为此使用 $timeout (如果没有办法，我可能需要这样做)。如果有办法推迟此操作，请告诉我。

Answer 1

尽管我之前的评论建议了一种从最严格的意义上完成您想要做的事情的方法，但我想建议一种改进，可以帮助您以更适合 Angular 的方式完成同样的事情。

不要使用 DOM 来根据 select 选项的值检查 input 框的值(这将需要 hack 式的解决方案)，您应该比较存储在原始数据结构中的选项数据的输入模型。

Controller 中的数据:

$scope.colors = [
    { name: 'Red' },
    { name: 'Orange' },
    { ... }
];

指令:

.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      items: '='
    },
    templateUrl: 'my-directive.html',
    link: function(scope, elem, attrs) {
      scope.checkValue = function(search){
        // directive scope function which checks search
        // value against items array
      };
    }
  }
})

指令模板:

<div>
  <input type="text" ng-model="search" ng-change="checkValue(search)" ng-class="{notfound: notfound}" />
  <select ng-options="item.name for item in items" ng-model="selection">
    <option value>Choose an option</option>  
  </select>
</div>

index.html:

<my-directive items="colors"></my-directive>

Working Plunker

总而言之，ng-change搜索输入框中的指令会触发指令作用域方法，该方法将值与所有数据项进行比较以查找匹配项。如果没有找到，则ng-class指令导致 notfound 类出现在元素上。

通常，在编写 Angular 应用程序时，如果您发现自己需要访问 DOM 来查找元素的存在，那么您会在其他地方找到更好的解决方案。使用 DOM 的解决方法在您的代码中应该很少或不存在。

我希望我的代码(和 Plunker )为您提供一个模板来对您的代码进行更改。如果此解决方案有问题，请在评论中告诉我。如果您对将其应用到代码有一般疑问，请随时私下与我联系。