Question

我查看了一堆angularjs指令，检查用户名的唯一性，并决定尝试最简单的实现。它做我想要的但可能不是真正的'惯用'角度。这是表单元素：

<input type="text"
    name="username"
    ng-model="form.username"
    unique-username=""
    required
/>
<span class="hide-while-in-focus" ng-show="thisform.username.$error.unique">Username taken!</span>

这是指令：

.directive('uniqueUsername', function($http) {
      return {
           restrict: 'A',
           require: 'ngModel',
           link: function (scope, element, attrs, ngModel) {
                element.bind('blur', function (e) {
                     ngModel.$setValidity('unique', true);

                     $http.get("/api/checkUnique/" + element.val()).success(function(data) {
                          if (data) {
                              ngModel.$setValidity('unique', false);
                          }
                     });
                });
           }
      };
})

快递调用

if (data) {
      console.log("found " + data.username);
      return res.send(data.username);
}
else {
      console.log("not found");
      return res.send(404);
}

我很感激任何关于为什么这样做好或坏的反馈，如果可能的话，我会感谢在模型上使用$ scope.watch的修订版。

Answer 1

一个小改进 - 我建议添加$ loading标志。由于它是一个异步请求，因此需要时间返回：

directive('uniqueUsername', function($http) {
      return {
           restrict: 'A',
           require: 'ngModel,^form',
           link: function (scope, element, attrs, ngModel) {
                element.bind('blur', function (e) {
                     ngModel.$loading = true;

                     $http.get("/api/checkUnique/" + element.val()).success(function(data) {
                        ngModel.$loading = false;
                        ngModel.$setValidity('unique', !data);
                     });
                });
           }
      };
})

然后您可以在等待异步调用返回时显示等待消息（或微调器）：

<input type="text"
    name="username"
    ng-model="form.username"
    unique-username=""
    required
/>
<span ng-show="thisform.username.$loading">Loading...</span>
<span class="hide-while-in-focus" 
     ng-show="thisform.username.$error.unique">Username taken!</span>

如果你希望它停止表单提交，直到异步调用返回，那么我建议将$ loading一个有效标记（即$ setValidity（＆＃39; loading＆＃39;，true / false））

唯一用户名的Angular指令

1 个答案: