使用服务时AngularJS无法正确加载指令

Question

I am new to JavaScript and working on something where I retrieve data from MongoDB and writing code on AngularJS to draw a pie chart using Highcharts . Code works fine when I am using just Angular controller without service but doesn't work when use service in between even though I hard code data in service. I am giving here working code and non-working code as well. I need to make this working using services as I need to read the actual data from MongoDB.

Below is my HTML file and JavaScript code for controller, service, etc. I have even hardcoded response that I am getting from service into controller to make sure it has data the way it is expected but still it is not drawing chart as expected.

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

Controller, directive, services code is as below.

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);

    }
  }
});

Services:

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);
            }
        }
    }]);

Below is the code how we connect controller, service together.

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

Web page does display [["Positive",2],["Negative",5],["Nutral",69]] value when I try to display them so hard coded value on controller is there on scope but for some reason my directive is not loading correctly.

If I do below code directly without service or something, it works fine and it does draw entire pie-chart as expected but why it doesn't work when I use the same thing via services. As I mentioned, my service does work correctly and I see that it gets me exact that data I am expecting in the expected format as well (I have hard coded same thing here).

Please check below code which works fine and draws the pie chart alright but not above code using service doesn't work. Can you help what is wrong with above code?

<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

be careful, angular.module('myApp', []) is a setter, and you use it two times, you should use it to instantiate your app, but use angular.module('myApp') after for a getter

Could you also change '.success' by '.then' please. .then use the promise system

you wrote 'instr' instead of 'instrument', can you change it ?

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

I changed some little things in your plunker and it works for me, if you dont have the data you want, you should watch in your back-end side http://plnkr.co/edit/ZShnouXLEVNxD1NHdev2?p=preview