1

私のページには、次のような読み込みアイコンが設定されています。

<div class="loading-mask" 
    data-ng-show="action != null">
    <span>{{action}} ...</span>
</div>

$scope.action を設定すると、読み込みボックスにメッセージが表示されます。

ページをロードするときに、データを取得するさまざまな非同期プロセスがいくつかあります。たとえば、私は持っています：

   getUserProfiles: function ($scope) {
        var url = '/api/UserProfile/GetSelect';
        $http({ method: 'GET', url: url })
            .success(function (data, status, headers, config) {
                $scope.option.userProfiles = data;
            })
            .error(function (data, status, headers, config) {
                alert("Error: No data returned from " + url);
            });
    },

と：

    getSubjects: function ($scope) {
        var url = '/api/Subject/GetSelect';
        $http({ method: 'GET', url: url })
            .success(function (data, status, headers, config) {
                $scope.option.subjects = data;
            })
            .error(function (data, status, headers, config) {
                alert("Error: No data returned from " + url);
            });
    },

これらの非同期プロセスの最初のプロセスで「読み込み中」メッセージが表示され、非同期プロセスの最後のプロセスで読み込みボックスが表示されないようにするにはどうすればよいですか。現時点では、エラー メッセージについては気にしていないことに注意してください。すべてが完了したときに読み込みが表示されないようにしたいだけです。

4

2 に答える 2

2

devmiles の発言を拡張するために、複数の非同期関数を処理するには、最初に呼び出される関数に読み込みフラグを設定する必要があります。すなわち:

   getUserProfiles: function ($scope) {
    $scope.loading = true;
    var url = '/api/UserProfile/GetSelect';
    $http({ method: 'GET', url: url })
        .success(function (data, status, headers, config) {
            $scope.option.userProfiles = data;
        })
        .error(function (data, status, headers, config) {
            alert("Error: No data returned from " + url);
        });
},

そして、次のように、各非同期関数をプロミスでラップする必要があります。

   getUserProfiles: function ($scope) {
    var deferred = $q.defer();
    $scope.loading = true;
    var url = '/api/UserProfile/GetSelect';
    $http({ method: 'GET', url: url })
        .success(function (data, status, headers, config) {
            $scope.option.userProfiles = data;
            deferred.resolve();
        })
        .error(function (data, status, headers, config) {
            alert("Error: No data returned from " + url);
            deferred.reject();
        });
   return deferred;
},

次に、すべての非同期関数で $q.all を呼び出すことができます。すべての非同期関数が解決されると、この成功コールバックが発生します。

$q.all([getUserProfiles, getSubjects]).then(function() {
    $scope.loading = false;
}

これは、すべての関数が解決されると、loading が false に設定されることを意味します。

注意: コールバックのデータにアクセスしたい場合は、それを「deferred.resolve(x)」のパラメーターとして渡すことができます。これにより、$q.all コールバックで function(x) として利用できるようになります。 { x で何かをする }.

お役に立てれば！

編集: angular の promise サービスである $q を、関数があるコントローラーに渡すことを忘れないでください。

于 2013-10-15T13:53:51.360 に答える
0

コントローラーがインスタンス化されているときにブール値フラグを設定し、成功/エラー関数でこのフラグをリセットするだけです。

.controller('MyCtrl', function ( $scope ) {
  $scope.isLoading = true;
  $http({ method: 'GET', url: url })
            .success(function (data, status, headers, config) {
                $scope.option.subjects = data;
                $scope.isLoading = false;
            })
            .error(function (data, status, headers, config) {
                alert("Error: No data returned from " + url);
                $scope.isLoading = false;
            });
});

このフラグを使用ng-showして、読み込み中のものを表示します。

于 2013-10-15T12:56:19.200 に答える