AngularJS未使用的服務

Question

我是新來的JavaScript和做某件事情，我檢索MongoDB的數據和AngularJS編寫代碼來繪製使用Highcharts餅圖時正確加載指令。代碼工作正常，當我只使用沒有服務的Angular控制器，但在使用服務時不起作用，即使我在服務中硬編碼數據。我在這裏給出了工作代碼和非工作代碼。我需要使用服務來工作，因爲我需要從MongoDB讀取實際數據。

下面是我的HTML文件和JavaScript代碼的控制器，服務等我甚至有硬編碼的響應，我從服務獲取到控制器，以確保它有數據的方式，但它仍然不是繪製圖表如預期。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<script src="js/controllers/twittersentimentcontroller.js"></script> 
<script src="js/services/twittersentimentservice.js"></script> 
<script src="js/core.js"></script> 


<div ng-app="myApp"> 
    <div ng-controller="mainController"> 
    <div class="hc-pie" items="limitedIdeas"></div> 
    <div items="limitedIdeas">{{limitedIdeas}}</div> 
    </div> 
</div> 

控制器，指令，服務代碼如下。

angular.module('myController', []) 

    // inject the Todo service factory into our controller 
    .controller('mainController', ['$scope','$http','some', function($scope, $http, some) { 
     $scope.loading = true; 
     console.log("inside controller...............");  

     some.get("android") 
      .then(function(data) { 
       console.log(data); 
       $scope.sentiments = [["Positive", 26], ["Negative", 5], ["Nutral", 69]]; 
       $scope.ideas = [["Positive",2],["Negative",5],["Nutral",69]]; 
       $scope.limitedIdeas = [["Positive",2],["Negative",5],["Nutral",69]]; 
       $scope.loading = false; 
      });  
    }]); 

angular.module('myApp') 
    .directive('hcPie', function() { 
    return { 
    restrict: 'C', 
    replace: true, 
    scope: { 
     items: '=' 
    }, 
    controller: function ($scope, $element, $attrs) { 
     console.log(2); 

    }, 
    template: '<div id="container" style="margin: 0 auto">not working....Please work....</div>', 
    link: function (scope, element, attrs) { 
     console.log(3); 
     var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
      percentageDecimals: 1 
     }, 
     plotOptions: { 
      pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       color: '#000000', 
       connectorColor: '#000000', 
       formatter: function() { 
       return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %'; 
       } 
      } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: scope.items 
     }] 
     }); 
     scope.$watch("items", function (newValue) { 
     chart.series[0].setData(newValue, true); 
     }, true); 

    } 
    } 
}); 

服務：

angular.module('someService', []) 

    // super simple service 
    // each function returns a promise object 
    .factory('some', ['$http',function($http) { 
     return { 
      get : function(instrument) { 
       return $http.get('/api/sent/'+instrument); 
      } 
     } 
    }]); 

下面是代碼，我們如何連接器，服務於一體。

angular.module('myApp', ['myController', 'someService']); 

網頁不顯示[["Positive",2],["Negative",5],["Nutral",69]]值當我試圖顯示他們控制器，硬編碼值是有關於範圍，但由於某種原因，我的指令不正確加載。

如果我做下面的代碼的情況下直接服務什麼的，它工作得很好，它並繪製整個餅圖的預期，但爲什麼當我通過服務使用同樣的事情不起作用。正如我所說，我的服務不正常工作，我看到它讓我確切的數據，我預期的格式預期以及（我已經硬編碼在這裏同樣的事情）。

請檢查下面的正常工作和使用服務無法正常工作正常的，但沒有得出上面的代碼餅圖代碼。你能幫助上面的代碼有什麼問題嗎？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
    <div class="hc-pie" items="limitedIdeas"></div> 
    </div> 
</div> 

<script> 
function MyCtrl($scope, limitToFilter) { 
    $scope.ideas = [ 
    ['ideas1', 1], 
    ['ideas2', 8], 
    ['ideas3', 5] 
    ]; 

    $scope.limitedIdeas = limitToFilter($scope.ideas, 3); 
} 

angular.module('myApp', []) 
    .directive('hcPie', function() { 
    return { 
    restrict: 'C', 
    replace: true, 
    scope: { 
     items: '=' 
    }, 
    controller: function ($scope, $element, $attrs) { 
     console.log(2); 

    }, 
    template: '<div id="container" style="margin: 0 auto">not working</div>', 
    link: function (scope, element, attrs) { 
     console.log(3); 
     var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
      percentageDecimals: 1 
     }, 
     plotOptions: { 
      pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       color: '#000000', 
       connectorColor: '#000000', 
       formatter: function() { 
       return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %'; 
       } 
      } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: scope.items 
     }] 
     }); 
     scope.$watch("items", function (newValue) { 
     chart.series[0].setData(newValue, true); 
     }, true); 

    } 
    } 
}); 

</script> 

Answer 1

要小心，angular.module('myApp', [])是一個二傳手，並使用它兩次，你應該用它來實例化你的應用程序，但使用angular.module('myApp')後的getter

是否也能更改」 .success '請'，然後'請。 。然後使用承諾制

你寫的，而不是「儀器」 INSTR'，你可以改變它？

.factory('some', ['$http',function($http) { 
    return { 
     get : function(instrument) { 
      return $http.get('/api/sent/'+instrument); 
     } 
    } 
}]); 

我改變了一些小東西在你plunker和它的作品對我來說，如果你沒有你想要的，你應該在你的後端側觀看http://plnkr.co/edit/ZShnouXLEVNxD1NHdev2?p=preview