Refresh data on click outside controller in angular

Question

I am trying to grasp the idea behind angular and ran into my first obstacle involving accessing data from outside the scope (the app?)

Here is a very simple example of what I'm trying to do:

HTML:

<div class=logo>
    <a href='/refresh'>Refresh</a>
</div>
<div ng-app ng-controller="threadslist">
<div class='thread_list_header'>
    <table class='thread_list_table'>
    <tr class='table_header'>
        <!--1--><td class='table_c1'></td>
        <!--2--><td class='table_c2'>{{name}}</td>
        <!--3--><td class='table_c3'>Cliq</td>
        <!--4--><td class='table_c4'>Last Poster</td>
        <!--5--><td class='table_c5'><a class="clickme">Refresh</a></td>
    </tr></table>
</div>
<table class='thread_list_table' >
    <tr class="thread_list_row" ng-repeat="user in users">
                <!--1--><td class='table_options table_c1'></td>
        <!--2--><td class='table_subject table_c2' title="">{{user.subject}}</td>
                <!--3--><td class='table_cliq table_c3'></td>
                <!--4--><td class='table_last table_c4'><span class="thread_username"><a href=#>{{user.username}}</a></span></td>
                <!--5--><td class='table_reply table_c5'><abbr class="thread_timestamp timeago" title=""></abbr></td>
    </tr>
    </table>
</div>

JS:

function threadslist($scope, $http) {
  $scope.name = 'Ricky';

  // Initialising the variable.
  $scope.users = [];
     $http({
    url: '/cliqforum/ajax/ang_thread',
    method: "POST",
  }).success(function (data) {
      console.log(data);
    $scope.users = data;
  });
  // Getting the list of users through ajax call.
  $('.table_header').on('click', '.clickme', function(){
        $http.get('/cliqforum/ajax/ang_thread').success(function(data){

            $scope.users = data;
        });   
  });
}

This is the part I can't figure out. My logo is supposed to clear whatever filter is on the current 'user' data. However, it sits outside the scope (and I imagine I shouldn't expand the scope to be the entire page?)

I have read something about scope.$spply but can't quite figure out what I'm supposed to do:

 $('.logo').on('click', 'a', function() {
         scope.$apply(function () {
            $scope.users = data;
        });
    });

It's not quite necessary that I do it THIS way...I would just like to do what is correct!

Thanks!

laurent · Accepted Answer · 2013-05-21 14:22:07Z

3

and I imagine I shouldn't expand the scope to be the entire page?

Why not? That's definitely the way to do it. Just include the logo into the scope and you can then access it from your application, and use ng-click to add a click handler.

In fact, you should avoid using jQuery click handlers within your application. You could transform your JavaScript like so:

$scope.tableHeaderClick = function() {
    $http.get('/cliqforum/ajax/ang_thread').success(function(data){
        $scope.users = data;
    });   
});

Then update the HTML like so:

<tr class='table_header' ng-click="tableHeaderClick()">

answered May 21, 2013 at 14:22

laurent

91.2k83 gold badges310 silver badges445 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricky Mason Over a year ago

Thanks! About 'why not': I suppose I had the idea of .on() from jquery in my head.

Jason · Accepted Answer · 2013-05-21 14:22:16Z

1

it is an angular anti-pattern to include DOM elements in controller. you want to use the ng-click directive to respond to click events

see this plnkr: http://plnkr.co/edit/KRyvifRYm5SMpbVvWNfc?p=preview

answered May 21, 2013 at 14:22

Jason

15.9k3 gold badges51 silver badges73 bronze badges

1 Comment

Ricky Mason Over a year ago

Thank you, appreciate all the info I can get.

Collectives™ on Stack Overflow

Refresh data on click outside controller in angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related