ng-repeat ng-click when the click function has already been called earlier in the code

Question

First off, I read the plethora of other questions and answers regarding ng-click, ng-repeat, and child and parent scopes (especially this excellent one.)

I think my problem is new.

I'm trying to call a function using ng-click within a table. The app allows for the sorting of Soundcloud likes. The problem is that when I try to call the ng click function using new data, it still tries to call the function using the old data. Let me explain better with the example:

Controller:

  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>

So I have that function getData. I use it to load the data in using the soundcloud api. I have a form at the top that uses getData to load a new user's Soundcloud data in. I also call the getData function in the controller so that there is an example on the page upon loading.

The problem is when I try to load a new user's data from a <td> I want to be able to click on the user to see and sort their likes.

How do I 'clear' the function or the global namespace (am I even refering to the right thing)? How can I reuse the getData function with a new variable?

Working Jsfiddle for this

score 2 · Accepted Answer · answered Jun 10 '14 at 17:17

2

In your getData function you have this line:

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

but you are passing in the variable sc_user to your getData function and should be using it like this (no $scope):

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

That being said... your initial data load fails because you are calling:

$scope.getData();

and not:

$scope.getData($scope.sc_user);

answered Jun 10 '14 at 17:17

Brocco

62,737
12
70
76

Thanks for the help. When does one pass $scope vs. just the variable? – Kyle Pennell Jun 10 '14 at 19:39
I try not to let my functions assume a variable lives on scope and just pass them into the function, this increases testability IMO, so you are explicitly setting the context in which the function will execute. – Brocco Jun 10 '14 at 19:41

ng-repeat ng-click when the click function has already been called earlier in the code

1 Answers1