Question

我的控制器中定义了一个范围函数，它调用API从数据库中获取数据。我在ng-repeat中使用这个范围函数。但是当我运行应用程序时，它正在被绞死，我对脏检查知之甚少，但我无法找到如何处理这种情况。

在我的控制器中：

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

Inside 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组件可以调用而不是控制器或指令。然而，我把它包含在这里的指令中，只是为了避免在我的回答中引入过多的动作部分。

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

1 个答案: