角指令的唯一的用户名 [英] Angular directive for unique username

问题描述

我看着一堆angularjs指令检查用户名的唯一性，决定尝试最简单的实现。它不会是我想要的，但未必真的是地道的角度。这里是表单元素：

I looked at a bunch of angularjs directives checking for uniqueness of a username and decided to try for the simplest implementation. It does what I want but may not really be 'idiomatic' angular. Here is the form element:

<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);
                          }
                     });
                });
           }
      };
})

和前任pressjs通话

And the expressjs call

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

我想AP preciate为什么这是好还是坏，如果可能的模型使用$ scope.watch修订任何反馈。

I would appreciate any feedback on why this is good or bad and if possible a revision that uses $scope.watch on the model.

推荐答案

一个小的改善 - 我会建议增加一个$装载标志。因为它是一个异步请求，它使需要时间它返回：

One small improvement - I would recommend adding a $loading flag. Since it is an asynchronous request, it make take time for it to return:

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);
                     });
                });
           }
      };
})

然后就可以显示等待消息（或微调），而其等待异步调用返回：

Then you can show a wait message (or spinner) while its waiting for the async call to return:

<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>

如果你想让它停止表单提交，直到异步调用返回的话，我会建议做$加载有效性标志（即$ setValidity（'负荷'，真/假））

If you want it to stop form submission until the async call returns, then I would suggest making $loading a validity flag (i.e. $setValidity('loading', true/false))

这篇关于角指令的唯一的用户名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！