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

user3255061 · Accepted Answer · 2014-02-11 23:56:21Z

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, 2014 at 23:56

user3255061

1,8151 gold badge33 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marek Magdziak · Accepted Answer · 2014-02-07 22:11:55Z

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 7, 2014 at 22:11

Marek Magdziak

361 bronze badge

6 Comments

user3255061 Over a year ago

Thanks @Marek for your answer, but unfortunately that doesn't work: It's still "<div id></div>".

Marek Magdziak Over a year ago

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 plnkr.co/edit/Al06fWr0Ib8H7BIr5Dbi?p=preview

user3255061 Over a year ago

Thanks a lot for your effort @Marek. You need an ID when you want to separate the legend from the graph: 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.

Marek Magdziak Over a year ago

In the labelsDiv you can pass element instead of id. I updated that plunk to match that case: 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. :)

user3255061 Over a year ago

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 :(.

|

Collectives™ on Stack Overflow

AngularJS: How to access scope from directive

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related