2015-05-18 3 views
2

У меня в моем проекте контроллер контрольно-измерительной диаграммы, который должен показывать данные с углового обслуживания. Но он не будет принимать данные из службы, когда я вызываю функцию сервиса. Вот что я пытаюсь:Передача данных углового обслуживания в контроллер gaugechart

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

Это моя служба данных .Это делает выборку данных, но не в состоянии передать в контроллер вал поля в коде контроллера

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, что я делаю неправильно?

ответ

1

Попробуйте это: -

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

Рекомендуется, чтобы сервисы возвращали обещания, поскольку во многих случаях запрашиваемые данные асинхронно извлекаются из внутреннего блока.

Ниже приводится приблизительная реализация сервиса, чтобы обеспечить обещание, вы можете использовать в контроллере:

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() из контроллера. Обратите внимание, что в этой альтернативе представление не будет подготовлено/отображено до тех пор, пока данные не будут извлечены из бэкэнд.

Вот фрагмент кода, показывающий, как вы можете обновить gaugeData с данными, устраненных от Promise:

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

+0

Спасибо за ваш ответ. Но служба не считывает данные, если я использую return с $ http. Я отредактировал код.Мне нужно что-то изменить в app.js? Спасибо в Advance – rawatdeepesh

+0

Похоже, вы определяете 2 отдельных Угловых модуля - один для службы (demoService) и еще один для контроллера (app.controllers). Я думаю, что это основная причина. Используйте один модуль и проверьте, не устраняет проблему. – OrenD

Смежные вопросы