javascript - AngularJS 输入中@符号后的完整电子邮件域

Question

我正在尝试创建一个功能，该功能将自动检测用户是否输入了“@”符号，并自动完成带有公司域的字段。页面上可能有多个字段，这就是为什么我不想硬编码他们的模型(例如 $scope.user.email)。
这是我到目前为止得到的:

<input ng-model="user.email" ng-keyup="autocompleteEmail($event);">

以及相应的 Controller 代码:

$scope.autocompleteEmail = function($event) {
    if (($event.keyCode === 48 || $event.keyCode === 50) && $event.srcElement.value.slice(-1) === "@") {
      // @ symbol is typed - completing email
      $event.srcElement.value += "mycompany.com";
    }
}

自动完成工作正常，但当我尝试使用这个新值提交表单时问题就出现了——它没有考虑我自动添加的 mycompany.com 域。正在发送的请求有 user.email = test@。

如何使用 AngularJS 实现此自动完成功能？

Answer 1

要使其尽可能通用，您可以采用指令方法。看这个Plunker

myApp.directive('completeEmailDomain', function(){  
 return {
    scope: {
       domain: '@',
       email: '='
    },
     restrict: 'E',
     template: '<input ng-model="email" ng-keyup="autoCompleteEmail($event);" />',
     link: function($scope, elem, attr) {
          $scope.autoCompleteEmail = function($event){
            console.log($scope.email);
            if (($event.keyCode === 48 || $event.keyCode === 50) && $event.srcElement.value.slice(-1) === "@") {
              $scope.email += $scope.domain;
            }
          }
     } 
 }; 
});

在那里，我创建了一个名为“complete-email-domain”的指令。它接受域和电子邮件，并在用户输入“@”后自动更新模型。这应该是完全可重用的，并且应该将更改值的实际处理范围限定为新指令。

也许一种改进是将域存储在用户对象上并将用户传递给指令。然后您可以以非常相似的方式访问“域”和“电子邮件”属性。