Javascript AngularJS：在模型和视图之间异步收集附加数据

我刚从Angular开始，遇到了一些关于在视图和模型之间异步转换数据的问题。假设我有一个列出用户及其姓名的表：

+--------------------------------------------------------+
| Username           First Name          Last Name       |
| -------------------------------------------------------|
| [______________]   ...                 ...             |
| [______________]   ...                 ...
+ -------------------------------------------------------+

每行有一个输入（在

username

字段中）。

名字

和

姓氏

字段为纯文本，用户不可编辑我希望能够在输入中键入用户名，进行REST API调用以查找该用户的数据库记录，并自动显示姓名（使用该记录）。

例如，如果我键入用户名

jsmith

，我希望它转到我的API并返回一个对象：

{
  "username": "jsmith",
  "firstname": "John",
  "lastname": "Smith"
}

然后我想在表中显示这些名称，如下所示：

+--------------------------------------------------------+
| Username           First Name          Last Name       |
| -------------------------------------------------------|
| [_jsmith_______]   John                Smith           |
+ -------------------------------------------------------+

输入与

ng model=“user”

绑定。我使用

ngModelController

钩住模型更新过程，获取用户对象，并在指定用户名时将其交换出去

我做了一个指令，

用户字段

：

angular.module('directives').directive('userField', ['api', function (api) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      if (!ngModel) return;

      ngModel.$render = function () {
        element.val(ngModel.$viewValue);
      };

      element.on('blur', function (e) {
        scope.$apply(function () {
          api.getUser({
            filter: 'username = "' + element.val() + '"'
          }, function (data) {
            ngModel.$setViewValue(data[0]);
            ngModel.$commitViewValue();
            ngModel.$render();

            // returns the entered user object that relates to the username
            console.log(ngModel.$viewValue);
          });
        });
      });
    }
  };
}]);

这是我的输入元素：

<input user-field ng-model="user" />

查看API回调中的console.log，用户键入的用户名成功转换为从API返回的用户对象。然而

问题1：该值似乎永远不会返回控制器本身。如果我

console.log

我的控制器的$scope，则

user

的值是

undefined

（甚至不是常规的未转换用户名）

问题2：即使我确实做到了，我也不认为我应该这样做。如果我将用户名字符串转换为一个对象，那么该字段将把文本切换为“[object object]”，而不是用户名。做这类事情有一个好的角度模式吗

---

感谢您的帮助。

问题1:无需将ngModel传递给指令。只需定义一个属性并配置指令的本地范围

比如说

HTML

“=”

在控制器范围和变量

用户的指令范围之间创建双向数据绑定

问题2:我认为使用对象没有问题。您只需访问users对象的
名称
属性即可。
如您在问题2中所说，此代码实际上不起作用。必须为firstname和lastname设置$scope变量。我认为，如果您尝试在控制器本身中编写此问题的代码，而不是使用指令，则会更容易。我发布的代码有点缩写，
users
模型实际上是一个对象。因此，特定的输入可能会绑定到
用户。thisuser
。我试图让用户对象转到
users.thisuser.\u source
，但无法找到答案。它也在一个ng重复中，所以我想不出一种方法来获得正确模型名的字符串版本。
<userfield user="model"></userfield>

angular.module('directives').directive('userField', ['api', function (api) {
  return {
  scope: {
         user: '='
  },
  restrict: 'A'

 };
}]);