javascript - 为什么 Angular 标签中的预输入有效

Question

我有以下代码。

<form ng-controller="emailViewController">
   <tags options="{addable: true}" placeholder="To" typeahead-options="typeaheadOpts" data-model="information.select" data-src="toPerson as toPerson for toPerson in to" style="width:95%;"></tags>
</form>

emailViewController.js

'use strict';

var emailViewController = function (fetchDataService,
                                    $scope,$filter) {

    var url = 'app/mock/emails.json';
    fetchDataService.getContent(url)
        .then(function(response){
            $scope.emails = response.data;
            $scope.to = [];

            angular.forEach($scope.emails, function(key) {
               $scope.to.push(key.to);
            });
        });

      $scope.to = ["John"];
};
angular.module('iisEmail')
    .controller ('emailViewController',
    ['fetchDataService', '$scope','$filter', emailViewController]);
}());

我有以下问题:

1) then 回调中的 $scope.to 变量包含一个数组，如下所示 ["America","Australia","Canada", “迪拜”]。在回调函数之后，我将 $scope.to 的值重新定义为 ["John"]。但是，当我在 tag 元素中输入 a 时，我仍然看到 typeahead 建议我选择 America 或 澳大利亚。当我输入 j 时，John 不会显示为选项。是什么导致了这种行为？

为了避免混淆，我想澄清一下，我的应用程序运行良好。我只是想了解这种行为，因为我不希望我的应用程序将来出现故障。

2) 当我按如下方式更改代码时，typeahead 中没有显示任何内容

emailViewController.js

   'use strict';

    var emailViewController = function (fetchDataService,
                                        $scope,$filter) {

        var url = 'app/mock/emails.json';
        fetchDataService.getContent(url)
            .then(function(response){
                $scope.emails = response.data;
                $scope.to = [];

                angular.forEach($scope.emails, function(key) {
                   $scope.to.push(key.to);
                });
            });
    };
    angular.module('iisEmail')
        .controller ('emailViewController',
        ['fetchDataService', '$scope','$filter', emailViewController]);
}());

因此，删除 $scope.to = ["John"] 会破坏代码。有人知道为什么会发生这种情况吗？

Answer 1

$http 服务异步运行请求并返回一个 promise 。

您的代码的执行顺序是这样的。

fetchDataService.getContent(url)

然后继续执行函数的其余部分

 $scope.to = ["John"];

然后请求完成并且 promise 得到解决

    .then(function(response){
            $scope.emails = response.data;
            $scope.to = [];

            angular.forEach($scope.emails, function(key) {
               $scope.to.push(key.to);
            });
        });

删除 $scope.to = ["John"] 意味着 $scope.to 未定义，这很可能是 typeahead 失败的原因。您正在迭代未定义。

尝试这样做:

'use strict';

var emailViewController = function (fetchDataService,
                                $scope,$filter) {

var url = 'app/mock/emails.json';
$scope.to = [];
fetchDataService.getContent(url)
    .then(function(response){
        $scope.emails = response.data;

        angular.forEach($scope.emails, function(key) {
           $scope.to.push(key.to);
        });
    });


};
angular.module('iisEmail')
    .controller ('emailViewController',
    ['fetchDataService', '$scope','$filter', emailViewController]);
}());

这样，您可以将 to 数组初始化为空列表，稍后当 http 请求完成时，您可以从服务器获取元素列表。

另请查看 Angular $q 以获取有关 Angular promise 的更多信息。