在代码中之前已经调用了click函数时,重复ng-click ng-click

时间:2014-06-10 17:05:41

标签: angularjs angularjs-scope angularjs-ng-repeat soundcloud angularjs-ng-click

首先,我阅读了大量关于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

1 个答案:

答案 0 :(得分:2)

在你的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);