私は AngularJS が初めてで、何時間も費やした後でも、インターネット上で以下の問題に対する答えを見つけることができません。
私が以下で試していることを、より良い方法で提案してください。
私の AngularJS の進行中のコードを参照してください。
<li ng-repeat="result in getResults()" ng-controller="resultController">
<div class="name_style">
{{result.name}}
</div>
<!--fetch more details for each result and set to $scope.resultDetail-->
<div class="name_detail_style" ng-bind=getDetails(result.name) ng-controller="resultDetailController">
{{resultDetail.image}}
{{resultDetail.description}}
</div>
</li>
簡潔にするために、上記を単純化しようとしました。
結果のリストを 2 つの部分でレンダリングしようとしています。
getResuls() は、残りのサービスを呼び出して結果の配列を取得します。
次に getDetails(result) が別のサービス呼び出しを行い、特定の結果の詳細を取得します。
AngularJS が名前とその詳細の両方を同時にレンダリングしようとするため、実行が非常に遅くなります。名前が利用可能になるとすぐにレンダリングし、 getDetail() サービス呼び出しが応答を返す機会を得るたびに詳細をレンダリングします。
このソリューションを使用できるかどうか/どのように使用できるか わかりませんSpringMVCでAngularJSを使用してデータを非同期にロードする方法は?
コントローラー側のコードも表示する必要がある場合はお知らせください。
EDITコントローラーコードの例も追加します。以下のコードを手動で再作成する際のタイプミスをお許しください。
function resultController($scope, $http) {
$scope.getResults = function() {
$http({method: 'GET', url: resultURL= timeout: maxTime})
.success(function (data, status, headers, config) {
console.log(data);
$sope.result=data;
})
.error(function (data, status, headers, config) {
if (status == 0) {
serviceTimedoutError($scope, data, status, config);
} else {
serviceFailure($scope, data, status, config);
}
})
};
};
function resultDetailController($scope, $http) {
$scope.getDetails = function(result) {
resultDetailsURL=resultDetailsUR+"/"+result
$http({method: 'GET', url: resultDetailsURL= timeout: maxTime})
.success(function (data, status, headers, config) {
console.log(data);
$sope.resultDetails={"image":data["image"],"description":data["description"]};
})
.error(function (data, status, headers, config) {
if (status == 0) {
serviceTimedoutError($scope, data, status, config);
} else {
serviceFailure($scope, data, status, config);
}
})
};
};