我想构建一个自定义的angularjs唯一值指令

Question

我想构建一个检查重复用户名的指令。所以我创建了一个索引.html文件和一个uniqueId指令。现在在指令中我无法ngModel.setValidity().它越来越undefined.

此外，我正在从本地json文件username.json获取数据。

当我控制台日志console.log(ngModel.$setValidity('unique', unique))时，我得到undefined.

我已经为代码创建了一个 plunk：：

https://embed.plnkr.co/XTPf9PjiMn9if5Y0DaHt/

Answer 1

您需要遍历 JSON 中存在的用户。而且，如果您的currentValue与其中任何一个匹配，则需要使用 $setValidity 将其设置为无效。喜欢这个：

dataService.getUsers().then(function(currentusers) {
    console.log(currentusers)
      //Ensure value that being checked hasn't changed
      //since the Ajax call was made
    if (currentValue == element.val()) {
      currentusers.forEach(function(user) {
        if (currentValue === user.property) {
          ngModel.$setValidity('unique', false)
        }
      });
    }
  }, function() {
    //Probably want a more robust way to handle an error
    //For this demo we'll set unique to true though
    ngModel.$setValidity('unique', true);
  });
});

此外，您的服务每次都会获取 JSON。或者，您可以将 JSON 响应存储在角度服务(单例(内的变量中，以便它比以前更快。喜欢这个

dataFactory.getUsers = function() {
  var deferred = $q.defer()
  if (angular.isDefined(savedResults)) {
    deferred.resolve(savedResults.data);
    return deferred.promise;
  } else {
    return $http.get(serviceBase).then(
      function(results) {
        savedResults = results
        return results.data;
      });
  }
};

在这里，如果数据已经可用，我们将返回已解决的承诺。它将首次获取 JSON，并将从内部使用。

工作普伦克

Answer 2

请检查 plnkr 链接

如果键入 [e-mail] ，它将显示已在使用的电子邮件。如果键入 [e-mail]1 ，则不会显示错误消息。我已经改变了条件。