Question

我有一个函数可以对外部API进行$ http调用，然后在ng-repeat数组中填充一些结果。

现在，ng-repeat上的每个元素都会触发该函数，这会产生大量的服务器调用。我希望函数只在点击ng-repeat中的元素时才进行调用。

我尝试过ng-click，但我会说我错过了什么。

我试图在点击时调用的$ http查询是第二个：

function ImageCtrl($scope, $http) {
      $scope.image = 'img/record-default.png'; 
      $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + $scope.artist.name + '&album=' + $scope.release.title + '&format=json').
        success(function (data4) {
          $scope.image = data4.album.image[2]['#text'];
        }
      )

    function getVersions ($scope, $http){    
      $http.get('http://api.discogs.com/masters/' + $scope.release.id + '/versions').
        success(function (data5) {
          $scope.versions = data5.versions;
      });
  }   

}

相关的html：

<div class="col-md-3" ng-controller="ImageCtrl" ng-repeat="release in releases | filter:album | filter:year | filter:{ role: \'main\' }" > 
  <div class="release" ng-click="getVersions()"> \
     <img class="img-responsive" ng-src="{{image}}" /> {{release.title}} 
        <ul ng-controller="ImageCtrl">
           <li ng-repeat="version in versions">{{version.format}}</li>
        </ul>            
  </div> 
</div>

和working Plunker。有问题的函数是script.js上的第60行

Answer 1

所以我最终拿走了你所展示的内容并做了一些重构。

我将getVersions移至原型，并使用它将版本附加到版本对象而不是$scope。

function ImageCtrl($scope, fakeService) {
  var _this = this;
  this.fakeService = fakeService;
  this.$scope = $scope;

  fakeService.getReleases()
      .then(function (releases) {
      $scope.releases = releases;
  });

  this.$scope.getVersions = function(release){
      _this.getVersions(release);
  };
}

ImageCtrl.$inject = ['$scope', 'fakeService'];

ImageCtrl.prototype.getVersions = function (release) {
  this.fakeService.getVersions(release.id)
      .then(function (versions) {
      release.versions = versions;
  });
};

标记不是非常不同，但您可以看到我将实际的release对象传递到click事件中getVersions函数的位置。这样，它总是直接作用于绑定到该特定行的对象。

<div class="row" ng-controller="ImageCtrl">
    <div class="col-md-3" ng-repeat="release in releases">
        <div class="release" ng-click="getVersions(release)">
            <h1>{{release.title}}</h1>
            <img class="img-responsive" height="100" width="100" ng-src="{{release.image}}" />
            <ul>
                <li ng-repeat="version in release.versions">{{version.format}}</li>
            </ul>
        </div>
    </div>
</div>

这是一个展示整个行动的工作演示：http://jsfiddle.net/jwcarroll/k6mkt/

我在这里使用虚假服务来模仿调用Web服务以获取数据。我强烈建议您将对$http的调用结束，以便在控制器中封装数据访问。

使用AngularJS点击ng时触发功能

1 个答案: