通過角廠向控制器提供數據

我試圖通過角度工廠函數檢索json數據並將數據提供給控制器以創建圖表（高圖）對象。但是，這給了我一個「參數」工廠函數名稱「不是一個函數，得到了未定義」的錯誤。我的JavaScript包含一個角度模塊，包含一個控制器和工廠（如上所述）以及一個呈現圖表的指令。通過角廠向控制器提供數據

我的JavaScript：

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

app.directive('highchart', function() { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     replace: true, 
     link: function (scope, element, attrs) { 
      scope.$watch(function() { 
       return attrs.chart; 
      }, function() { 
       if (!attrs.chart) return; 
       var charts = JSON.parse(attrs.chart); 
       $(element[0]).highcharts(charts); 
      }); 
     } 
    }; 
}); 

app.factory('GetOverSpeedWorstData', function ($scope, $http) { 
    $http.get('http://localhost:5155/overspeedworst/OverSpeedworst').success(function (data, status) { 
     $scope.score = []; 
     for (var i = 0; i < data.length; i++) { 
      score.push(data[i].Score); 
     } 
     $scope.name = []; 
     for (var i = 0; i < data.length; i++) { 
      name.push(data[i].Name); 
     } 
    }).error("error message"); 
    $timeout($scope.fetch, 1000); 
}); 

app.controller('Ctrl', function ($scope, GetOverSpeedWorstData) { 
    $scope.name = GetOverSpeedWorstData.name; 
    $scope.score = GetOverSpeedWorstData.score; 
    $scope.renderChart = { 
     chart: { 
      type: 'bar' 
     }, 
     xAxis: { 
      categories: name 
     }, 
     series: [{ 
      data: score 
     }], 
     legend: { 
      enabled: false 
     } 
    }; 
});

，我的HTML是：

<!DOCTYPE> 
<html xmlns="http://www.w3.org/1999/xhtml">   
    <head> 
     <title>Dashboard Application</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script type="text/javascript" src="Scripts/OverSpeedWorstDataServiceApp.js"></script> 
     <script type="text/javascript" src="Scripts/DashboardCtrl.js"></script> 
     <link rel="stylesheet" type="text/css" href="Dashboard.css"> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td> 
        <h2>Overspeed (Worst) Scores</h2> 
        <section ng-app="OverSpeedWorstDataServiceApp"> 
         <div ng-controller="GetOverSpeedWorstData"> 
          <highchart chart='{{renderChart}}'></highchart> 
         </div> 
        </section> 
       </td> 
       <td> 
        <h2>Overspeed (Best) Scores</h2> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <h2>Vehicle Mileage</h2> 
       </td> 
       <td> 
        <h2>Servicing Report</h2> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

爲什麼會出現這種情況有什麼建議？而且，如果我在控制器中檢索數據（相關的代碼也被粘貼），這可以很好地運行。

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

app.directive('highchart', function() { 
    return { 
     restrict: 'E', 
     template: '<div></div>', 
     replace: true, 
     link: function (scope, element, attrs) { 
      scope.$watch(function() { 
       return attrs.chart; 
      }, function() { 
       if (!attrs.chart) return; 
       var charts = JSON.parse(attrs.chart); 
       $(element[0]).highcharts(charts); 
      }); 
     } 
    }; 
}); 

app.controller('Ctrl', function ($scope, $http, $timeout) { 
    $http.get('http://localhost:5155/overspeedworst/OverSpeedworst').success(function (data, status) { 
     var score = []; 
     for (var i = 0; i < data.length; i++) { 
      score.push(data[i].Score); 
     } 
     var name = []; 
     for (var i = 0; i < data.length; i++) { 
      name.push(data[i].Name); 
     } 
     $scope.renderChart = { 
      chart: { 
       type: 'bar' 
      }, 
      xAxis: { 
       categories: name 
      }, 
      series: [{ 
       data: score 
      }], 
      legend: { 
       enabled: false 
      } 
     }; 
    }).error("error message"); 
    $timeout($scope.fetch, 1000); 
});

要添加更多的，我的JSON數據的形式爲：

[{ 
    "Name": "A", 
    "Score": 900 
}, { 
    "Name": "B", 
    "Score": 846 
}, { 
    "Name": "C", 
    "Score": 757 
}, { 
    "Name": "D", 
    "Score": 321 
}, { 
    "Name": "E", 
    "Score": 222 
}]

來源

2013-07-17 user2547150

嘿你是如何設法使用工廠服務？ –

你的問題不在於控制器，但可以定義服務的方式，用工廠：Angularjs - Declaring factory with a single object with a nested array - getting ReferenceError: .... is not defined

你應該可能是這樣做的：

app.factory('GetOverSpeedWorstData', function ($scope,$http) { 
    var r; 
    $http.get('http://localhost:5155/overspeedworst/OverSpeedworst').success(function (data, status) { 
     stuff, like r = data 
    }).error("error message"); 
    error stuff  
    }); 

    return {service methods here};

否則您的事實ry並沒有考慮任何因素。它必須返回一些東西。

來源

2013-07-17 10:46:27

嗨Eduard，感謝您的及時回覆。我一直在嘗試你的建議很長一段時間，但仍未能解決問題。如果我得到了數據並在控制器內進行了操作，但是如果我通過工廠獲取數據並在控制器中執行操作，則不會。你能否重新回顧這個問題和建議。請爲這兩種方法找到Plunker鏈接，http://plnkr.co/edit/6fzjT8zoeR3zgSnIKVK9?p=preview（正常工作）http://plnkr.co/edit/EaWAEH8oi3BwbKTrEuxO?p=preview（不起作用） – user2547150

你有很多錯誤。你沒有檢查螢火蟲的控制檯嗎？我更新了它http://plnkr.co/edit/UbLqiO2kTJvb59ZikaKO?p=preview當您在控制器中查找數據時，您將需要使用promise來確保數據得到解決。閱讀本文http://stackoverflow.com/questions/16286605/initialize-angularjs-service-with-asynchronous-data –

@EduardGamonal你會解釋一下更多...現在我也陷在這個相同的問題..... –

1）定義一個服務：

app.factory('GetOverSpeedWorstData', 
    function ($resource) { 
     var apiPath = 'http://localhost:5155/overspeedworst/OverSpeedworst'; 
     return $resource(apiPath, {}, { 
      'query': {method:'GET', isArray:true}    
     }); 
});

2）在控制器爲此

app.controller('Ctrl', function ($scope, $http, $timeout, GetOverSpeedWorstData) { 

    $scope.list = new GetOverSpeedWorstData(); 

    $scope.list.$query(success, error); // or use promise 

    function success (data) { 
     //data manipulation 
    }; 

    function error (data) { 
     //error handling 
    }; 
});

3）舞蹈就像沒有人在看你！

來源

2016-08-26 10:40:01

通過角廠向控制器提供數據

回答

相關問題