Javascript 使用服务时AngularJS未正确加载指令

我不熟悉JavaScript，正在研究从MongoDB检索数据，并在AngularJS上编写代码，使用它绘制饼图。当我只使用角度控制器而不使用服务时，代码可以正常工作，但当在两者之间使用服务时，代码不工作，即使我在服务中硬编码数据。我在这里给出了工作代码和非工作代码。我需要使用服务来实现这一点，因为我需要从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('myApp', ['myController', 'someService']);

当我试图显示它们时，网页确实会显示

[[“阳性”，2]，“阴性”，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>

函数MyCtrl（$scope，limitToFilter）{
$scope.ideas=[
[ideas1'，1]，
[ideas2'，8]，
[ideas3'，5]
];
$scope.limitedeas=limitToFilter（$scope.ideas，3）；
}
angular.module（'myApp'，[]）
.指令（'hcPie'，函数（）{
返回{
限制：“C”，
替换：正确，
范围：{
项目：'='
},
控制器：函数（$scope、$element、$attrs）{
控制台日志（2）；
},
模板：“不工作”，
链接：函数（范围、元素、属性）{
控制台日志（3）；
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
正文：“2010年特定网站的浏览器市场份额”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage}%”，
百分比小数：1
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回“+this.point.name+”：“+this.percentage+”%”；
}
}
}
},
系列：[{
键入“pie”，
名称：“浏览器共享”，
数据：scope.items
}]
});
范围.$watch（“项目”），功能（newValue）{
chart.series[0].setData（newValue，true）；
}，对）；
}
}
});

小心，

angular.module（'myApp'，[]）

是一个setter，你使用它两次，你应该用它来实例化你的应用程序，但使用

angular.module（'myApp'）

作为getter

你能不能把“.success”改成“.success”，然后改成“please.”。然后使用承诺系统

你写的是instr而不是instr，你能改一下吗

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

---

我在您的plunker中更改了一些小东西，它对我很有用，如果您没有所需的数据，您应该在后端观看

谢谢您的回答。我已经改变了，但问题仍然是一样的。即使我在服务中添加了硬编码值，图表也不会加载，但在没有服务代码的情况下，它可以正常工作。您可以在指令中控制台记录“scope.items”吗？您希望我在指令中的何处进行控制台记录？我完全是在指令声明之后做的，但它没有打印任何东西。我的意思是，甚至不是简单的“insidedirective”字符串，所以它根本不被调用。很抱歉，我犯了一些愚蠢的错误，但对NodeJS来说非常陌生，主要是来自java背景，所以syntex让我感到困惑。这里是我做控制台日志的地方。angular.module（'myApp'）.directive（'hcPie'，function（）{console.log（“内部指令：“+$scope.items”）；我已将.success替换为.then以及.success。仍然是一样的。这是可以正常加载图表的工作代码插件。这没有服务版本。我现在正在创建另一个非工作服务插件。

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

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