ng-repeat ng-click 当 click 函数已经在代码前面被调用时

Question

首先，我阅读了有关 ng-click、ng-repeat 以及子范围和父范围的大量其他问题和答案（尤其是 this 非常棒。）

我认为我的问题是新的。

我正在尝试在表格中使用 ng-click 调用函数。该应用程序允许对 Soundcloud 喜欢进行排序。问题是当我尝试使用新数据调用 ng click 函数时，它仍然尝试使用旧数据调用该函数。让我用这个例子更好地解释一下：

控制器：

  function TopListCtrl($scope, $http) {
    $scope.sc_user = 'coolrivers';
  $scope.getData = function(sc_user) {
     var url = 'http://api.soundcloud.com/users/'+ $scope.sc_user +'/favorites.json?client_id=0553ef1b721e4783feda4f4fe6611d04&limit=200&linked_partitioning=1&callback=JSON_CALLBACK';
    $http.jsonp(url).success(function(data) {
    $scope.likes = data;
    $scope.sortField = 'like.title';
    $scope.reverse = true;

  }); 
  }
  $scope.getData();

  $scope.alertme = function(permalink) {
    alert(permalink);
  };
}

HTML

<div id="topelems">
    <p id="nowsorting">Now sorting the Soundcloud likes of <input type=text ng-model="sc_user"><button class="btn-default" ng-click="getData(sc_user);">Sort</button></p>
      <p id="search"><input ng-model="query" placeholder="Filter" type="text"/></p>
  </div>
    <table class="table table-hover table-striped">
      <thead>
      <tr>
        <th><a href="" ng-click="sortField ='title'; reverse = !reverse">Song</a></th>
        <th><a href="" ng-click="sortField ='user.username'; reverse = !reverse">Artist</a></th>
        <th><a href="" ng-click="sortField = 'favoritings_count'; reverse = !reverse">Likes</a></th>
        <th><a href="" ng-click="sortField = 'playback_count'; reverse = !reverse">Played</a></th>
        <th><a href="" ng-click="sortField = 'tag_list'; reverse = !reverse">Tags</a></th>
      </tr>
      </thead>
      <tr ng-repeat="like in likes.collection | filter:query | orderBy:sortField:reverse">
        <td width="30%"><a href="{{ like.permalink_url }}">{{like.title}}</td>
  (Trying to call it here)      <td><a href="#" ng-click="getData(like.user.permalink)">{{like.user.username}}</a></td>
        <td>{{like.favoritings_count}}</td>
        <td>{{like.playback_count}}</td>
        <td>{{like.tag_list}}</td>
      </tr>
    </table>

</div>

</body>
</html>

所以我有那个功能getData。我用它来使用 soundcloud api 加载数据。我在顶部有一个表单，它使用 getData 来加载新用户的 Soundcloud 数据。我还在控制器中调用 getData 函数，以便加载时页面上有一个示例。

问题是当我尝试从<td> 加载新用户的数据时，我希望能够点击该用户来查看他们的喜好并对其进行排序。

我如何“清除”函数或全局命名空间（我什至指的是正确的东西）？如何使用新变量重用 getData 函数？

Working Jsfiddle for this

Answer 1

在你的 getData 函数中有这一行：

var url = 'http://api.soundcloud.com/users/'+ $scope.sc_user +'/favorites.json...

但是您将变量 sc_user 传递给您的 getData 函数，并且应该像这样使用它（没有 $scope）：

var url = 'http://api.soundcloud.com/users/'+ sc_user +'/favorites.json...

话虽如此...您的初始数据加载失败，因为您正在调用：

$scope.getData();

而不是：

$scope.getData($scope.sc_user);