AngularJS: Как внедрить сервис в директиву

Question

Я не в состоянии ввести службу в директиву - она ​​работает с моим контроллером. Согласно документу, это должно быть довольно прямолинейно.

Услуги:

priceGraphServices = angular.module('priceGraphServices', ['ngResource']) 

priceGraphServices.factory "myService", [ 
    "$resource" 
    ($resource) -> 
     return $resource("phones/priceDev.json", {}, 
      get: 
       method: "GET" 
       isArray: true 
     ) 
] 

Контроллер:

drawGraph.controller "MyCtrl", [ "myService", "$scope", (myService, $scope) -> 

    #Get RESTful data 
    myService.get {}, ((data) -> 

     # If success: Data is here 
     rawData = data 

     # Convert date and set draw options for graph 
     i = 0 
     while i < rawData.length 
      j = 0 
      while j < rawData[i].data.length 
       # Convert date 
       tmp = new Date(rawData[i].data[j][0]) 
       rawData[i].data[j][0] = tmp 

       # Set draw options 
       rawData[i].opts = 
       customBars: true, 
       labelsSeparateLines: "true", 
       hideOverlayOnMouseOut: false, 
       legend: "always", 
       showRangeSelector: true, 
       xAxisLabelWidth: 80, 
       ++j 
      ++i 

      $scope.graphs = rawData 

      return 
     ), (data) -> #failure 
      #error handling goes here 
] 

Я думаю, что код в контроллере, а должен быть в директиве, но мне не удается получить это право , Моя попытка:

Директива:

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

    link: (scope, elem, attrs) -> 
     scope.graph = new Dygraph(elem.children()[0], scope.data, scope.opts) 

     myService.get {}, ((data) -> 
      # Controller Code 
] 

Но это не работает: нет ошибок в консоли, но пустой частично. Может ли кто-нибудь сказать мне, почему?

Update:

Моя текущая директива:

.directive "graph", ["myService", (myService) -> 
    restrict: "E" 
    scope: 
     data: "=" 
     opts: "=?" # '?' means optional 
     id: "=" 

    link: (scope, elem, attrs) -> 
     scope.graph = new Dygraph(elem.children()[0], scope.data, scope.opts) 

     # Get RESTful data 
     myService.get {}, ((data) -> 

      # If success: Data is here 
      rawData = data 

      # Convert date and set draw options for graph 
      i = 0 
      while i < rawData.length 
       j = 0 
       while j < rawData[i].data.length 
        # Convert date 
        tmp = new Date(rawData[i].data[j][0]) 
        rawData[i].data[j][0] = tmp 

        # Set draw options 
        rawData[i].opts = 
        customBars: true, 
        labelsSeparateLines: "true", 
        hideOverlayOnMouseOut: false, 
        legend: "always", 
        showRangeSelector: true, 
        xAxisLabelWidth: 80, 
        ++j 
       ++i 

       $scope.graphs = rawData 

       return 
      ), (data) -> #failure 


       #error handling goes here 

Update 2 (Составитель код):

App.js

var App; 
App = angular.module('app', ['test']); 

Directives.js

var test; 
test = angular.module("test", []); 

test.directive("graph", [ 
    "myService", function(myService) { 
    return { 
     restrict: "E", 
     scope: { 
     data: "=", 
     opts: "=?", 
     id: "=" 
     }, 
     link: function(scope, elem, attrs) { 
     scope.graph = new Dygraph(elem.children()[0], scope.data, scope.opts); 
     return myService.get({}, (function(data) { 
      var i, j, rawData, tmp; 
      rawData = data; 
      i = 0; 
      while (i < rawData.length) { 
      j = 0; 
      while (j < rawData[i].data.length) { 
       tmp = new Date(rawData[i].data[j][0]); 
       rawData[i].data[j][0] = tmp; 
       rawData[i].opts = { 
       customBars: true, 
       labelsSeparateLines: "true", 
       hideOverlayOnMouseOut: false, 
       legend: "always", 
       showRangeSelector: true, 
       xAxisLabelWidth: 80 
       }; 
       ++j; 
      } 
      ++i; 
      $scope.graphs = rawData; 
      return; 
      } 
     }), function(data) {}); 
     } 
    }; 
    } 
]); 

Answer 1

Должно быть:

.directive "graph", [“myService”, (myService) -> 

Answer 2

Я установил код:

app = angular.module('app', []) 

app.directive "graph", ["myService", (myService) -> 
    restrict: "E" 
    scope: 
     data: "=" 
     opts: "=?" # '?' means optional 
     id: "=" 

    link: (scope, elem, attrs) -> 
     scope.graph = new Dygraph(elem.children()[0], scope.data, scope.opts) 

     # Get RESTful data 
     myService.get {}, ((data) -> 

      # If success: Data is here 
      rawData = data 

      # Convert date and set draw options for graph 
      i = 0 
      while i < rawData.length 
       j = 0 
       while j < rawData[i].data.length 
        # Convert date 
        tmp = new Date(rawData[i].data[j][0]) 
        rawData[i].data[j][0] = tmp 

        # Set draw options 
        rawData[i].opts = 
         customBars: true 
         labelsSeparateLines: "true" 
         hideOverlayOnMouseOut: false 
         legend: "always" 
         showRangeSelector: true 
         xAxisLabelWidth: 80 
        ++j 
       ++i 

      $scope.graphs = rawData 
      return 

      ), (data) -> #failure 

       #error handling goes here 
] 

Попробуйте этот плагин: https://sublime.wbond.net/packages/JavaScript%20%26%20Coffeescript%20Build%20Systems