Question

我刚开始使用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 ：即使我确实这样做了，我也不认为这正是我应该做的。如果我将用户名字符串转换为对象，那么该字段将把文本切换为＆＃39; [object Object]＆＃39;而不是用户名。做这种事情是否有一个众所周知的Angular模式？

感谢您的帮助。

Answer 1

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

例如

HTML

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

AngularJS

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

 };
}]);

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

问题2：我发现使用对象没问题。您只需访问用户对象的name属性即可。

AngularJS：在模型和视图之间异步收集其他数据

1 个答案: