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>

そして、選択ボックスの選択肢を初期化する対応するコントローラー。私が使用しているサービスは、データベースから値を受け取った後、指定されたコールバック関数を呼び出します。(コールバック関数は 1 つにリファクタリングできますが、わかりやすくするために別のものを使用しています。)

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

コード内の 3 つの点を変更する必要があります

  1. サービスは promise を返す必要があります : promise の作成については angular のドキュメントを参照してください データがサーバーから受信されたときにサービス内で promise を解決します
  2. promise が解決されたときに、コントローラ内で bar と foos に適切な値を割り当てるだけです
  3. 適切な角度スコープ内の値を変更しているため、 $scope.apply を削除します

リンク: Angular で Promise とサービスを一緒に使用する

于 2013-04-08T12:48:59.173 に答える