javascript - AngularJS:在模型和 View 之间异步收集附加数据

Question

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

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

每行有一个输入(在用户名字段中)。 First Name 和 Last Name 字段是纯文本，用户不可编辑。 我希望能够在输入中输入用户名，进行 REST API 调用来查找该用户的数据库记录，并自动显示名字和姓氏(使用该记录)。

例如，如果我输入用户名 jsmith，我希望它转到我的 API 并返回一个对象:

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

然后我想在表格中显示这些名称，给我这个:

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

输入与ng-model="user"绑定(bind)。我使用 ngModelController 来 Hook 模型更新过程以获取用户对象并在给定用户名时将其交换出来。

我做了一个指令，用户字段:

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:看起来这个值永远不会返回到 Controller 本身。如果我console.log Controller 的$scope，则user的值为undefined(甚至不是常规的未转换的用户名)。

问题 2:即使我确实做到了这一点，我也不认为这正是我应该做的。如果我将用户名字符串转换为对象，则该字段会将文本切换为“[object Object]”而不是用户名。是否有一个众所周知的 Angular 模式来执行此类操作？

感谢您的帮助。

Answer 1

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

例如

HTML

<userfield user="model"></userfield>

AngularJS

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

 };
}]);

'=' 在 Controller 作用域和变量 user 的指令作用域之间创建双向数据绑定(bind)。

问题 2:我认为使用对象没有问题。您只需访问用户对象的 name 属性即可。