AngularJS: How to access scope from directive

Question

I'm using a directive to draw graphs:

drawGraph.directive "graph", ->
  restrict: "E" # Use as element
  scope: # Isolate scope
    data: "=" # Two-way bind data to local scope
    opts: "=?" # '?' means optional

  template: "<div></div><div id='{{graph.id}}'></div>" # We need a div to attach graph to
  link: (scope, elem, attrs) ->
    graph = new Dygraph(elem.children()[0], scope.data, scope.opts)

While

<div id='{{graph.id}}'>

actually works in the partial, it returns

<div id></div>

when I use it in the template of the directive. Can anyone tell me why?

Update:

After the hint of @Marek, my directive now looks like this:

drawGraph.directive "graph", ->
    restrict: "E" # Use as element
    scope: # Isolate scope
        data: "=" # Two-way bind data to local scope
        opts: "=?" # '?' means optional

    template: "<div></div><div class='legend'></div>" # We need a div to attach graph to
    link: (scope, elem, attrs) ->
        scope.opts.labelsDiv = elem.children()[0].getElementsByClassName("legend")[0]
        scope.graph = new Dygraph(elem.children()[0], scope.data, scope.opts)

Options are added in the controller:

drawGraph.controller "MyCtrl", [ "myService", "$scope", (myService, $scope) -> 
    myService.async().then (d) ->
        rawData = d
        group = rawData

        i = 0
        while i < group.length
            j = 0
            while j < group[i].data.length
            # Convert date
            tmp = new Date(group[i].data[j][0])
            group[i].data[j][0] = tmp
            # Set draw options
            group[i].opts = 
                labels: [ "x", "Your Price", "Market Price" ],
                customBars: true,
                labelsSeparateLines: "true",
                hideOverlayOnMouseOut: false,
                legend: "always",
                showRangeSelector: true,
                xAxisLabelWidth: 80,
            ++j
        ++i
$scope.graphs = group

score 1 · Accepted Answer · answered Feb 11 '14 at 23:56

1

Problem was that an isolated scope can't access the parent scope by default, so "id" needs to be defined in the scope of the directive.

drawGraph.directive "graph", [(graph) ->
restrict: "E"
scope:
    data: "="
    opts: "=?"
    id: "="

answered Feb 11 '14 at 23:56

user3255061

1,757
1
30
50

score 0 · Answer 2 · answered Feb 07 '14 at 22:11

0

You're not actually putting the graph into the scope. The last line should be:

scope.graph = new Dygraph(elem.children()[0], scope.data, scope.opts)

answered Feb 07 '14 at 22:11

Marek Magdziak

36
1

Thanks @Marek for your answer, but unfortunately that doesn't work: It's still "
". – user3255061 Feb 07 '14 at 22:22
Okay, I took a look at the dygraph library and as I saw the object that Dygraph constructor returns doesn't contain id property. Good thing is that you don't need one. Take a look here http://plnkr.co/edit/Al06fWr0Ib8H7BIr5Dbi?p=preview – Marek Magdziak Feb 07 '14 at 22:37
Thanks a lot for your effort @Marek. You need an ID when you want to separate the legend from the graph: http://dygraphs.com/options.html#Legend "labelsDiv", which is what I want to achieve. I also feel like I'm missing some fundamental understanding of scopes and directives somehow here. – user3255061 Feb 07 '14 at 22:45
In the labelsDiv you can pass element instead of id. I updated that plunk to match that case: http://plnkr.co/edit/Al06fWr0Ib8H7BIr5Dbi?p=preview There is lot of nasty stuff around scopes and directives but also great possibilities. Be sure to check the angular documentation. :) – Marek Magdziak Feb 07 '14 at 23:07
Thanks @Marek, tried that - see update above. However, console says "labelsDiv: undefined", which I think could be related to the fact that I'm setting the other options in the controller. I also guess there must be a more "angular" way of making the interpolation of scopes work. You mentioned the doc, I of course read it, but unfortunately I'm too new to AngularJS and not super experienced, I just don't get it I fear :(. – user3255061 Feb 07 '14 at 23:41
There are some other answers on SO that I think are dealing with the same issue, but unfortunately I can't make it work with my code. http://stackoverflow.com/questions/16421111/how-to-get-access-to-a-directive-attrs-with-isolated-scope?rq=1 and (much longer) http://stackoverflow.com/questions/14914213/when-writing-a-directive-how-do-i-decide-if-a-need-no-new-scope-a-new-child-sc?rq=1 for instance. – user3255061 Feb 07 '14 at 23:45

AngularJS: How to access scope from directive

2 Answers2