如何在 ng-repeat 中调用 API 函数？

Question

我的控制器中定义了一个作用域函数，它调用 API 从数据库中获取数据。我在 ng-repeat 中使用了这个作用域函数。但是当我运行应用程序时，它被挂起，我对脏检查知之甚少，但我不知道如何处理这种情况。

在我的控制器中：

$scope.GetTranslatedText = function (categoryID, categoryDetailID, languageID) {
        $http.get('api/datacategorydetailtranslations' + '/' + categoryID + '/' + categoryDetailID + '/' + languageID).
        success(function (data) {
            return data.datacategorydetailtranslations;
        });
    };

Index.jade 内部

li(ng-repeat="property in properties track by property.PropertyID | orderBy : 'Region'" ng-init="abc=compute()" menuhover itemscope itemtype="http://schema.org/Hotel")
  a(ng-href='{{property.UrlName}}')
      img.hotelImage(ng-src='http://cdn.objects.florahospitality.com/media/property/thumbnail/{{property.PropertyThumbnail}}' alt="{{property.PropertyName}}" style="height:36px;width:40px;")
          div.column2
              p.hotelName(itemprop="name") {{property.PropertyName}}
                  div.thumbsUpNav(florapopover template="thumbsUpNav")
                      span.sprite_image.white_thumbs_up_icon
                  p.starRating
                      span(class="{{property.StarRating}}")                                                    
                          span(ng-show="property.Visible", style="width:310px;") {{property.StarRating}}
                  p.hotelAddress
                      span(itemprop="location") {{GetTranslatedText(2, property.StreetAddress, 1)}}
                      span.viewMap(data-item="4" itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates") (Show Map)
                          meta(itemprop="latitude" content="25.2530800688814")
                          meta(itemprop="latitude" content="55.3282535076141")

Answer 1

当您在视图插值中放置一个函数时，每个摘要周期至少会对它进行两次评估，这可能是每秒多次。因此，将 API 调用放入其中一个函数中并不是一个好主意。

考虑改用指令。比如：

.directive('getTranslatedText', function($http){
  return {
    scope: {
      categoryID: '@catId',
      categoryDetailID: '@catDetailId',
      languageID: '@langId'
    },
    link: function(scope, element, attrs) {
      $http.get('api/datacategorydetailtranslations' + '/' + scope.categoryID + '/' + scope.categoryDetailID + '/' + scope.languageID)
      .success(function (data) {
        scope.translated = data.datacategorydetailtranslations;
      });
    },
    template: '<span itemprop="location">{{translated}}</span>'
  }
});

...它会出现在您的视图中，如下所示：

<span get-translated-text cat-id="2" cat-detail-id="{{property.StreetAddress}}"
lang-id="1"></span>

每个指令实例的 API 调用只会在其链接函数被调用时运行一次。

Here is a demo，它展示了这个概念，但由于网络请求无效而无法完全工作。

顺便说一句，$http 调用最好包含在服务中，其他 Angular 组件可能会调用这些服务，而不是在控制器或指令中。但是，我将其包含在此处的指令中，只是为了避免在我的答案中引入过多的活动部件。