1

我正在使用 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 之外”，我相信这使得这些调用是合理的——而且实际上是必要的.

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

4

1 回答 1

3

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

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

链接：在 Angular 中同时使用 Promise 和 service

于 2013-04-08T12:48:59.173 回答