1

我是 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>

为简洁起见，我试图在上面进行简化。

我正在尝试分两部分呈现结果列表：

  1. getResuls() 进行休息服务调用以获取结果数组。

  2. 然后 getDetails(result) 进行另一个服务调用以获取特定结果的更多详细信息。

它运行得非常慢，因为 AngularJS 试图同时呈现名称和它的细节。我希望名称在可用时立即呈现，并在 getDetail() 服务调用有机会获得响应时呈现详细信息。

我无法弄清楚是否/如何使用此解决方案 如何使用带有 SpringMVC 的 AngularJS 异步加载数据？

如果您也需要查看控制器端代码，请告诉我。

编辑也添加控制器代码示例。请原谅手动重新创建以下代码中的任何拼写错误。

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);
                }
            })
    };

};
4

2 回答 2

1

我在http://plnkr.co/edit/nTI58uAkUfE3pw2yjy9q创建了一个 plunk，它展示了如何使用服务和指令来实现你所说的结果。关键是在指令链接时，id 与指令相关联。然后使用 detailId 上的 $watch 来触发辅助调用。

要将它用于您的完整项目，您必须更新服务以使用 $http 或 $resource 调用从您的服务器获取内容。

于 2013-05-19T19:37:06.487 回答
1

您不能（实际上不应该）在模板中引用本质上是 AJAX 调用包装函数的内容。没关系，这不是“角度方式”（模板不应该弄乱数据，而您的 ng-repeat 是调用 ajax 函数的原因），它会中断，因为您正在进行 AJAX 调用（每个调用一个返回数组中的元素！）对于每个渲染周期！

您应该能够（并且很可能想要）控制何时从后端/API 获取信息，并使用它直到您想要刷新它/提交任何更改。所以，主要要做的是改变：

<li ng-repeat="result in getResults()" ng-controller="resultController">

至

<li ng-repeat="result in myResults" ng-controller="resultController">

和结果控制器：

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);
                }
            })
    };

    $scope.myResults = $scope.getResults();

};

这样做是在实例化控制器时调用 AJAX 请求一次。

然后您可以对 resultDetailController 执行相同的操作，但请考虑是否值得。仅当主要结果不太可能发生很大变化时（每次更改时，请求都会重复），或者细节代表大量数据，并且您确实需要快速显示结构时，才应该将这些调用分开，只有这样，细节。

此外，请考虑仅在例如用户“打开它”时调用元素的详细信息。

编辑，回复下面的评论

正如我所说，您应该真正将信息（模型，以及获取和更新它的 AJAX 请求）与模板和显示分开。也就是说，您需要决定什么是最好的：

  • 您可以预先获取所有信息，然后进行过滤（仅过滤显示的内容）或
  • 您可以从后端获取一组过滤的元素

在第二种情况下，您仍然应该控制 AJAX 调用发生的频率。例如，您可以观察过滤器变量（使用 $scope.$watch() ）并在发生这种情况时调用 $http 服务：

（在结果控制器中：）

$scope.$watch("filterString", function(){
  $scope.myResults = $scope.getResults($scope.filterString);
}

我会注意到，每次您在过滤器“搜索框”中输入内容时，都会发出一个新请求（这可能是过度杀伤甚至导致错误结果 - 如果“beac”请求在“请求”之后返回海滩”，例如）。一种可能的解决方案是在您键入时实现覆盖先前的超时（搜索仅在您停止键入后的 0.5 秒内开始）

$scope.$watch("filterString", function(){
  $scope.getResultsTimeout.cancel();
  $scope.getResultsTimeout = $timeout(
    function(){
      $scope.myResults = $scope.getResults($scope.filterString);
    },
    500);
}
于 2013-05-20T01:05:56.240 回答