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', [])是一个setter，你使用它两次，你应该用它来实例化你的app，但是之后使用angular.module('myApp')来获取一个getter

您是否也可以通过'.then'更改'.success'。然后使用承诺系统

你写了'instr'而不是'instrument'，你可以改变吗？

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

我在你的plunker中改变了一些小东西，它对我有用，如果你没有你想要的数据，你应该在你的后端观察http://plnkr.co/edit/ZShnouXLEVNxD1NHdev2?p=preview

AngularJS在使用服务时没有正确加载指令

1 个答案: