In angular JS, how to execute a jQuery line of code?

Question

In the view, I have the following:

<table class="table table-bordered" id="resultsTable"> <thead> <th>Classification</th> <th>Date</th> </thead> <tr ng-repeat="result in results"> <td>{{result.result}}</td> <td>{{result.date}}</td> </tr> </table> 

I want to use a floating header, but since the table is empty when the page loads for the first time, it gives me strange results ( http://www.fixedheadertable.com/ )

If the contents of the table were static, this will work fine:

 $(document).ready(function() { $('#resultsTable').fixedHeaderTable({ footer: true, cloneHeadToFoot: false, fixedColumn: false }); }); 

In the controller, I have this function that loads data after clicking a button:

  $scope.loadResults = function() { var url = "URL WITH QUERY"; $http.get(url).success( function(data, status, headers, config) { for (var i = 0; i < data.length; i++) { $scope.results.push({date: data[i].date, p: data[i].p, result: data[i].result}); } //**IDEALLY I WOULD WANT TO RUN THE JQUERY LINE HERE** } ); }; 

So what I want to do is run this line, which I usually run on the finished document after loading all the data into the results array.

How do you do this?

Please imagine an example when I continue to read about "directives", but no one says exactly how it allows you to call jquery, where you need to select a jquery string or how it can be called from my controller.

Answer 1

You can simply achieve this by using the scope $emit or $broadcast and $on events in your scope to call jQuery functions at the appropriate time.

The difference between $emit and $broadcast :

• $ broadcast - sends an event down to all child areas,
• $ emit - dispatches an event up the scope hierarchy.

This example will help to understand this: http://jsfiddle.net/sebmade/GkarV/

Answer 2

Nothing prevents you from doing this:

 $scope.loadResults = function() { var url = "URL WITH QUERY"; $http.get(url).success( function(data, status, headers, config) { for (var i = 0; i < data.length; i++) { $scope.results.push({date: data[i].date, p: data[i].p, result: data[i].result}); } $('#resultsTable').fixedHeaderTable({ footer: true, cloneHeadToFoot: false, fixedColumn: false }); } ); }; 

but this is not considered best practice.

Additionally, you may need to wait for the digest Angular loop to complete in order to process ng-repeat. You can do this with $timeout() or possibly $scope.$evalAsync() (I'm not 100% sure about later work in this case, it might still work too soon, so you will need to test it )

The best solution would be to create a directive for this plugin. I don’t see anything in the documents for the Fixed Header Table plugin to allow dynamic data, so you will need to solve this problem with promises to ensure that the initialization will happen after the data is ready and displayed, or the clock to the result array, to call destroy in the plugin and reinitialize it.