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）$scope.to回调中的then变量包含类似["America","Australia","Canada","Dubai"]的数组。在回调函数之后，我将$scope.to的值重新定义为["John"]。但是，当我在a元素中输入tag时，我仍然看到typeahead建议我选择America或Australia。当我输入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服务以异步方式运行请求并返回一个承诺。

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

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失败的原因。你正在迭代undefined。

尝试这样做：

'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]);
}());

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

另请查看角度 $ q ，了解有关角度承诺的更多信息。

为什么有角度标签的预先输入正在工作

1 个答案: