0

I am using AngularJS and angular-datatable library. I need to invoke modal on click on row. Here is my part of code:

  function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    // Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87)
    $('td', nRow).unbind('click');
    $('td', nRow).bind('click', function() {
      console.log(aData.title);
      $timeout(function(){
        Modal.showModal({
         template : 'views/Modal.html',
         Data : aData
         });
      }, 0);
    });
    return nRow;
  }

console.log function works fine any way, but invoking modal function works as expected only when it wrapped in timeout. So can someone explain why this happening? Why only first function works good? I will be grateful for any explanations.

Dima Adas
  • 300
  • 2
  • 10
  • yeah, it is a service, but it doesnt work even if i wont put any parameters in it. And console.log works with aData any way).Ty for reply. – Dima Adas Oct 14 '15 at 10:21

2 Answers2

0

The reason you need the $timeout, is because you're using a jQuery event with an angular function. This is a bad idea in general and is against the design principles of angular - use ng-click instead.

If you must mix jQuery and angular together, then make sure you do it properly by making angular aware of jQuery events so that it can trigger its digest cycle.

You can trigger a digest in a few ways but the easiest (and most obvious as to what you code is doing) is by using $scope.$apply:

$scope.$apply(function () {

  Modal.showModal({
   template : 'views/Modal.html',
   Data : aData
  });

});

The reason the $timeout works is because $timeout is an angular wrapper function that triggers a digest cycle as part of its implementation (it's actually very similar to $scope.$apply, but it's less obvious what it's doing / why it's needed when you review your code later, so I'd advise using $scope.$apply instead).

Further reading: ng-book.

Ed_
  • 18,798
  • 8
  • 45
  • 71
0

There is no callback for when the browser rendering engine will complete rendering the page.

But rendering the page is handled by the event queue. By using the $timeout function you are assigning Modal.showModal to the end of the event queue - after page rendering methods which have already been queued.

Therefore Modal.showModal will be called after the page has been rendered and work correctly.

James Drummond
  • 125
  • 7