使用 AngularJS 在 ngclick 上触发功能

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 对象传递到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 的调用，以便将数据访问封装在您的控制器中。