0

I'm trying to build a wrapping directive for a d3 force graph. I'm building a tool bar for the graph, and if you click something on the toolbar it should change stuff in the graph (hide/show labels, remove/add nodes)

What I would like is that the toolbar elements will each have an ng-click attribute that will reference the function that does its meaning, but it means that I have DOM manipulation code inside the controller. So I thought to have an elem.on event handlers, but that means that my code is very dependent on my view (the code needs to know the right selector to use etc.)

I also like to use as less jquery as i can. using jqlite is ok for me, but not sure that I want to be dependent on jquery.

What is your way to do similar stuff?

Thanks, Chaim

Chiptus
  • 949
  • 9
  • 25
  • 1
    More code, less words... Create a simple example illustrative of your question and show in code what issue you are encoutering – New Dev Dec 12 '15 at 15:57
  • Is he not looking for hints and not a solution to a particular problem? – Chris Hermut Dec 12 '15 at 16:09
  • I will try posting an example. I look for the best practice. It's something i see a lot and I have been wondering for a long time. I usually just have bind the functions to the controller inside the link function – Chiptus Dec 12 '15 at 16:24
  • @ChrisHermut, SO is not the best place to ask for best practices since it attracts opinion-based answers (one of "close" reasons for questions). Still, it's possible to express such questions when a simpler example illustrative of the question is used, and the question is made more concrete – New Dev Dec 13 '15 at 00:02

1 Answers1

0

An appropriate place to interact with your view is in link function aka compile.post.

Link function is being triggered after controller function returns (with $scope object populated). Of course link function is part of DDO (Directive Definition Object).

.directive('sampleDrv', function () {
  return {
     link: function (scope, element, attrs, controller) {

     }
  }
}

Also I've been dealing with d3js in my angularjs apps and would recommend this approach http://www.ng-newsletter.com/posts/d3-on-angular.html

Chris Hermut
  • 1,708
  • 3
  • 17
  • 32
  • Of course I would use the link function, but isn't putting elem.find(elemId).on connect between my code to the view. If I change the elem id, i will lose the element. also angular doesn't support selectors so i will have to have jquery. I read the article a long time ago, I will review it again see if there's something i missed/forgot/didn't understand before – Chiptus Dec 12 '15 at 16:18
  • Why do you want to use jQuery to attach event handlers instead of using angularjs for that? – Chris Hermut Dec 12 '15 at 16:29
  • I don't want. but angular's jqlite find doesn't let me use selectors, only tag names – Chiptus Dec 12 '15 at 20:15
  • Have a look at that http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background?rq=1? – Chris Hermut Dec 12 '15 at 20:17