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

AngularJS: Collecting additional data asynchronously between the model and view

本文关键字：数据 异步 之间 模型 视图 AngularJS      更新时间：2023-09-26

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

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

每行（在username字段中）有一个输入。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"绑定。我使用ngModelController挂接到模型更新过程中，以获取用户对象，并在给定用户名时将其交换出去。

我做了一个指令，user-field:

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：即使我确实做到了，我也不认为这正是我应该做的。如果我将用户名字符串转换为对象，那么该字段将把文本切换为"[对象对象]"，而不是用户名。有没有一个很好的已知的角度模式来做这种事情？

谢谢你的帮助。

问题1:不需要将ngModel传递给指令。只需定义一个属性并配置指令的本地作用域。

例如

HTML

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

AngularJS

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

'='在控制器作用域和变量user的指令作用域之间创建双向数据绑定。

问题2:我认为使用对象没有问题。您可以简单地访问用户对象的name属性。

相关文章：