AngularJS: Как получить доступ к сфере из директивы

Question

Я использую директиву для рисования графиков:

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) 

Хотя

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

на самом деле работает в частичном, она возвращает

<div id></div> 

, когда я использую его в шаблоне директивы. Может ли кто-нибудь сказать мне, почему?

Update:

После намека @Marek, моя директива теперь выглядит следующим образом:

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) 

Опция добавлена ​​в контроллере:

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 

Answer 1

Проблема в том, что изолированный сфера не может доступ к родительской области по умолчанию, поэтому «id» необходимо определить в области действия директивы.

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

Answer 2

Вы фактически не помещая граф в область видимости. Последняя строка должна быть:

scope.graph = новые Dygraph (elem.children() [0], scope.data, scope.opts)