更新

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
]

但这不起作用：控制台中没有错误，但是空的部分错误。谁能告诉我为什么？

更新

我当前的指示：

.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

更新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

AngularJS：如何将服务注入指令

更新

更新2（编译代码）：

2 个答案: