2

現在ログインしているユーザーの ID とユーザー名を Angular ディレクティブで使用できるようにしたいと考えています。この情報を (他の情報と共に) 取得するための API エンドポイントを作成しました。

問題は、API 呼び出しが非同期であることです。

var url = baseUrl + 'api/sessions';
$http.get(url)

API によって返される JSON オブジェクトを返すファクトリを作成しようとしています。ただ、呼び出しが非同期なのでファクトリーメソッドの実装方法がわかりません。

さらに、値が API から返されるまでディレクティブをインスタンス化したくありません。非同期呼び出しが最初に返されたことを確認するメカニズムが AngularJS に組み込まれていますか、それともグローバル オブジェクトを作成し、呼び出しが返されたときに (JSON オブジェクトを使用して) その値を更新する必要がありますか?

これは私が現在持っているものです：

application.factory('session', ['$http', 'baseUrl', function ($http, baseUrl) {
    var session = {};
    var url = baseUrl + 'api/sessions';
    var promise = $http.get(url)
        .success(function (data) {
            for (var key in data) {
                session[key] = data[key];
            }
        });
    return session;
}]);

問題は、依存ディレクティブが、セッション オブジェクトが読み込まれる前にそれを取得していることです。API 呼び出しに時間がかかると、ユーザーが使用するときにセッション オブジェクトが初期化されていないことが懸念されます。

4

2 に答える 2

0

AngularJS に関して言えば、かなり厄介なアンチ パターンに従っていたことがわかりました。HTML の関数に属性をバインドしていました。ほとんどの場合、これはng-disabled="isThisFieldDisabled()".

問題は、関数が呼び出されるたびにフィールドを無効にする必要があるかどうかを計算していたことです。データが非同期でロードされた場合、これらの関数はまず、データがまだロードされているかどうかを確認する必要があります。

function ($scope, someFactory) {

    someFactory.then(function (data) {
        $scope.data = data;
    });

    $scope.isThisFieldDisable = function () {
        if (!angular.isDefined($scope.data)|| $scope.data === null) {
            return true;
        }
        return $scope.data.someCondition;
    };
}

はるかに簡単な方法は、呼び出しからデータが返されたときに条件を単純に更新することです。

function ($scope, someFactory) {

    $scope.someCondition = true;

    someFactory.then(function (data) {
        $scope.someCondition = data.someCondition;
    });

    $scope.isThisFieldDisable = function () {
        return $scope.someCondition;
    };
}

もちろん、$scope値を返すだけであれば、関数は不要になります。このように HTML を更新するng-disabled="someCondition"と、コントローラーはより単純になります。

function ($scope, someFactory) {

    $scope.someCondition = true;

    someFactory.then(function (data) {
        $scope.someCondition = data.someCondition;
    });
}

ほとんどの場合、実際に$scope関数をローカル関数に変換しました。それらには、バッキング フィールドの値を「計算」するためのロジックが含まれていたため、コールバックから呼び出すことが理にかなってい$httpます。あまりダンプしていなかったので、通常はパラメーターを追加する必要がありました$scope。

于 2015-03-11T20:11:41.343 に答える
0

いつでも ngIf を使用して、要件を満たすのを待つことができます。

<div ng-if="session" session-toolbox></div>

このようにして、セッションが設定されると、ディレクティブ session-toolbox を DOM で使用できるようになります。

ただし、現在の範囲外でこのデータを収集する場合は、カスタム イベントを $broadcast し、目的のコントローラー内でそのイベントをリッスンする必要があります。

于 2014-03-19T15:24:03.750 に答える