将 angular 服务数据传递给仪表图控制器

Question

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

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

这是我的服务数据。它确实获取数据但无法传递给控制器代码中的控制器 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;
    });
   ]}

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

提前致谢

@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.Anything 读取数据？

Answer 1

建议为服务提供 return 承诺，因为在很多情况下请求的数据是从后端异步获取的。

以下是提供可在控制器中使用的承诺的服务的粗略实现：

app.service('myService', ['$http', '$q', 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'];
          }
          return $q.when([{
            maxValue: 3e3,
            animationSpeed: 100,
            val: v
          }]);
        });
    };
  }
]);

现在，在控制器中，您必须根据提供的承诺的决议采取行动。您有多种选择：

在从服务接收到实际数据之前，您可以使用足以满足您的视图的数据初始化 $scope.gaugeHome，然后在解决承诺时设置 gaugeData 属性。
您可以在该控制器的路由器配置的解析部分添加对 myService.getData() 函数的调用。通过这种方式，您可以将已解析的承诺注入控制器并准备好数据，而无需从控制器内部调用 getData() 函数。请注意，在这种替代方案中，在从后端获取数据之前，视图不会 prepared/displayed。

这是一个代码片段，显示了您可以使用已解决的承诺数据更新 gaugeData 的方式：

app.controller('gaugeCtrl', ['$scope', 'config', 'myService',
  function($scope, config, myService) {
    $scope.gaugeHome = {
      gaugeData: [],
      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]
        ]
      }
    }

    myService.getData().then(function(dataArr) {
      $scope.gaugeHome.gaugeData = dataArr;
    });
  }
]);

Answer 2

试试这个：-

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

将 angular 服务数据传递给仪表图控制器

passing angular service data to gaugechart controller

service

jquery

http

promise

angularjs