CODEWITHSUNDEEP
angularjs-directiveangularjs-scope
user3255061
user3255061

Reputation: 1815

AngularJS: How to access scope from directive

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

Upvotes: 0

Views: 258

Answers (2)

user3255061
user3255061

Reputation: 1815

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: "="

Upvotes: 1

Marek Magdziak
Marek Magdziak

Reputation: 36

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)

Upvotes: 0

Related Questions