4

I'm having some AngularJS trouble with firing off a directive when ng-repeat has completed an update. I have three named arrays, switched to via three links, allowing the selected array to be displayed by the ng-repeat. I'd like to fire some code off when it's finished as I'm planning to set some element attributes for D3 to use.

I've tried checking scope.$last in my directive, but this isn't called at the end of every ng-repeat process. If some of the data remains the same, it may not set scope.$last to true.

http://plnkr.co/edit/hwmOlI6YrgS4H1C1h7k2?p=preview

So, what's the best way to trigger code in a directive when ng-repeat has finished?

Mister Dai
  • 796
  • 1
  • 6
  • 19
  • Where does this directive go? Can you update the plunk with the directive? I know it needs to go inside the ng-repeat. If you could update the plunk with the directive it would make it easier to solve your problem. – ganaraj Apr 08 '13 at 14:16
  • Updated the plunk with a more obvious name, it was in there as the attribute testing="" on the li element. Renamed it to testdirective so it stands out more. – Mister Dai Apr 08 '13 at 14:19
  • Sorry, dint see that , my bad :) – ganaraj Apr 08 '13 at 14:31

1 Answers1

10

Here is a solution for you. Note that the last triggers each time now.

http://plnkr.co/edit/xV1quqzorzxliS2shrP4?p=preview

You just need to $watch the $last variable and it will work fine. This helps in situations where the scope is not created but just updated with new values. Your directive gets created once and if one of the repeated variable just changes values ng-repeat optimizes and just updates values ( as opposed to removing all the values and re-creating the new ones. ). In this scenario, the $scope.$last will be an updated variable and not something that gets "created". So, you will need to $watch it.

ganaraj
  • 26,841
  • 6
  • 63
  • 59
  • That worked, thanks :) My only issue left is that sometimes d3 is grabbing a data attribute and it still has {{data.changerate}} instead of the value (e.g. 20). Most of the time though it's been parsed and the value is returned. Any thoughts? – Mister Dai Apr 08 '13 at 14:47
  • I am not exactly sure where and in what scenario you are attempting to do this, but if you are doing
    Then you can get the value of that attribute by doing attrs.$observe(data-someattrib,function(newValue){ });     – ganaraj Apr 08 '13 at 14:52
  • Something like that. Check out http://plnkr.co/edit/aSXs6mGgQmvpGCL1i1IZ I've console.log'ed the data D3 ends up returning. If you switch from page "one" to "two" you'll see {{reference[id].count}} in the array from some entries. Not sure how to combine observe with d3. – Mister Dai Apr 08 '13 at 15:18
  • Could you let me know what you are trying to achieve? It somehow seems like what we are doing here is a myopic view and a complete picture would provide for a better solution. – ganaraj Apr 08 '13 at 15:42
  • 2
    @MisterDai, you may need to use `$timeout` in your $watch callback. See http://stackoverflow.com/a/14656888/215945 for a very similar issue. – Mark Rajcok Apr 08 '13 at 16:09
  • @MarkRajcok awesome :) Looks like using $timeout did the trick. Now switching between the different tables (rows built with ngRepeat) allows my D3 directive to fire, check the data and colour the cells. http://github.yougeezer.co.uk/alpha/#/repositories – Mister Dai Apr 09 '13 at 10:20