Question

我正在使用AngularJS编写Web应用程序。我使用第三方库（提供Angular服务）从数据库中获取值，然后使用它们初始化页面上的一些下拉/选择框。

所以，我有这样简单的选择框：

<div ng-controller="ChoiceCtrl">
    <select ng-model="selectedFoo" ng-options="foo in foos"></select>
    <select ng-model="selectedBar" ng-options="bar in bars"></select>
</div>

一个相应的控制器，用于初始化选择框的选项。我正在使用的服务在从数据库接收值后调用给定的回调函数。（回调函数可以重构为一个，但为了清楚起见，我使用了单独的回调函数。）

angular.module('choice').controller('ChoiceCtrl', function($scope, ThirdPartyService) {
    $scope.selectedFoo = '';
    $scope.selectedBar = '';
    $scope.foos = '';
    $scope.bars = '';

    var fooCallback = function(result) {
        $scope.foos = result;
        $scope.$apply;
    }

    var barCallback = function(result) {
        $scope.bars = result;
        $scope.$apply;
    }

    ThirdPartyService.asyncGetData('fetchFooOptions', fooCallback);
    ThirdPartyService.asyncGetData('fetchBarOptions', barCallback);
});

数据库调用是异步的，并且在第一次呈现页面后完成，因此我在每个回调函数中手动调用$scope.$apply。

在加载页面时异步提取值时，这是在AngularJS应用中初始化下拉列表/选择框的正确方法吗？

我已经阅读了教程，说手动调用$scope.$apply总是一个“代码味道”......但是因为我从数据库中获取值，所以操作发生在“Angular之外”，我相信使这些呼叫合理 - 实际上是必要的。

我也想知道控制器是否适合这些呼叫。在我读过的教程中，选项总是在控制器中设置，但那些沙箱示例从未发生过异步数据库调用。

Answer 1

您应该修改代码中的三件事

服务应该返回一个承诺：请参阅角度文档以创建承诺内部服务解决了从服务器收到数据时的承诺
当承诺得到解决时，内部控制器只需为bar和foos分配适当的值
删除$ scope.apply，因为现在您正在修改适当角度范围内的值

链接：Use Promise and service together in Angular

在AngularJS中初始化/填充页面加载时的选择框

1 个答案: