jquery - 将 angular.service 数据传递给 gaugechart Controller

标签 jquery angularjs http service promise

我的项目中有一个仪表图表 Controller ,它必须显示来自 angular.service 的数据。但当我调用服务函数时,它不会接受来自服务的数据。这是我正在尝试的:

 Controller.js

 angular.module("app.controllers", [])
 .controller("gaugeCtrl", ["$scope","config","myService",
  function ($scope,config,myService) {
    $scope.gaugeHome = {

      gaugeData: myService.getdata(),
      gaugeOptions: {
        lines: 12,
        angle: 0,
        lineWidth: 0.47,
        pointer: {
          length: 0.6,
          strokeWidth: 0.03,
          color: "#555555"
        },
        limitMax: "false",
        colorStart: config.secondary_color,
        colorStop: config.secondary_color,
        strokeColor: "#F5F5F5",
        generateGradient: !0,
        percentColors: [
          [0, config.secondary_color],
          [1, config.secondary_color]
        ]
      }
    }
  ])

这是我的服务数据。它确实获取了数据,但无法传递到 Controller 代码中的 Controller val 字段

  var demoService= angular.module('demoService',[])
  .service('myService',function($http,$q){
   var deferred = $q.defer();
  $http.get('http://enlytica.com/RSLivee/rest/census').then(function(data)
   {
     deferred.resolve(data);
 /*var v=0;
 $players=data.data;
    console.log($players.Tweets);
     ($players.Tweets).forEach(function(index, element) {
         v=v+ (index.FAVOURITE_COUNT);
         console.log(index.FAVOURITE_COUNT); 
     });
     console.log(v);
     deferred.resolve(v);*/
   });


this.getdata=function()
{  

var dataarr = [];
var v=0;
deferred.promise.then(function(data)
        {

    $players=data.data;
    console.log($players.Tweets);
     ($players.Tweets).forEach(function(index, element) {
         v=v+ (index.FAVOURITE_COUNT);
         console.log(index.FAVOURITE_COUNT); 
     });
     console.log(v); 
     dataarr.push({ maxValue: 3e3,animationSpeed: 100,val: v})
     console.log(dataarr);
    });

 return (dataarr);

 }
})

我还尝试像下面一样获取controller.js中的数据,但它也不起作用:

angular.module("app.controllers", []).controller("gaugeCtrl",["$scope","config","myService",
function ($scope,config,myService) {
var v=0;
var dataarr=[];
 var promise=myService.getdata();
console.log(promise);
var tp=promise.then(function(data)
        {
    $players=data.data;
    console.log($players.Tweets);
     ($players.Tweets).forEach(function(index, element) {
         v=v+ (index.FAVOURITE_COUNT);
        // console.log(index.FAVOURITE_COUNT); 
     });
     console.log(v);
     dataarr.push({ maxValue:800,animationSpeed: 100,val: v});
     console.log(dataarr);
     return dataarr;
    });
   ]}

但无法访问 dataarrv 值。有没有一种方法可以将值传递给我的仪表。

提前致谢

@OrenD 我更改了 Service.js 代码:[我删除了 DI,因为它引发了错误 -->

  Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?      
 p0=fn&p1=not%20aNaNunction%2C%20got%string
 at Error (native)
at http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:14:4847
at Sb (http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:14:11576)
at tb (http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:14:11670)
at Function.ab.$$annotate (http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:16:25928)
at e (http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:14:19914)
at Object.instantiate (http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:14:20199)
at Object.<anonymous> (http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:14:20480)
at Object.e [as invoke] (http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:14:20075)
at Object.$get (http://localhost:8080/Enlytica18thOnwards/dist/js/app.js:14:19010) ]


 Service .js


 var demoService= angular.module('demoService',[])
 .service('myService', function($http, $q) {
  this.getData = function() {
   return $http.get('http://enlytica.com/RSLivee/rest/census')
    .then(function(data) {
      var v = 0;
      for (var i = 0; i < data.data.Tweets.length; ++i) {
        v += data.data.Tweets[i]['FAVOURITE_COUNT'];
      }
      console.log(v);//doesnt show anything on console
      return $q.when([{
        maxValue: 3e3,
        animationSpeed: 100,
        val: v
      }]);
    });
   };
  }
);

但是现在这不会从 url 读取数据。我做错了什么吗?

最佳答案

试试这个:-

    app.factory("companyData", function ($http) {
return {
        getAll: function (items) {
            var path = "https://dl.dropboxusercontent.com/u/28961916/companies.json"
            $http.get(path).success(items);
        }
    }
});
letus consider this is a service
here this returns items object
if I want to use that items object in controller app.controller("mainController", function ($scope, companyData) {
    //console.log(companyData.getAll());
    companyData.getAll(function (companyDetails) {
        console.log(companyDetails)
    }
    }

关于jquery - 将 angular.service 数据传递给 gaugechart Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30298386/

相关文章:

javascript - 通过单击元素来更改元素的文本。 jQuery

angularjs - 输入时未验证 Angular ui-bootstrap datepicker 思维

html - 有没有理由不将主 css 文件嵌入到网页中?

javascript - AngularJS - ng-repeat 不显示信息

AngularJS - 基于 null 和空数组的隐藏值

c# - HttpWebRequest.Begin GetRequestStream() 最佳实践

http - 如何通过代理服务器客户端使用自签名证书

javascript - 使用 PHP 和 Javascript 将字母数字值作为函数内的参数传递时出现错误

javascript - 当您从列表中选择时,Jquery 动态添加字段

javascript - 选项卡内容不会在选项卡单击时显示