angularjs - Accessing Data set via a Promise in an Angular Directive -

angularjs - Accessing Data set via a Promise in an Angular Directive -

i writing first non-trival angular app , have nail snag directive. directive takes info controller's scope , applies google chart. chart not issue - works fine dummy info - access properties of scope object obtained via http:

i accessing info returned via api in service utilizes $http:

dashboardservices.factory('searchlist', ['$http','$q', function($http, $q){ homecoming { getsearchdetails:function(searchtype, resulttype){ homecoming $http.get("api/searches/"+searchtype+"/"+resulttype) .then(function(response){ if (typeof(response.data === 'object')) { homecoming response.data; } else { homecoming $q.reject(response.data); } },function(response){ $q.reject(response.data); }); } } }]);

in controller, taking response service , attaching scope via promises' "then" method:

dashboardcontrollers.controller('dashboardctrl', ['$scope', 'searchlist', function($scope, searchlist){ $scope.searchdata = {}; $scope.searchdata.charttitle="search result performance" searchlist.getsearchdetails("all", "count").then(function(response){ $scope.searchdata.total = response.value; //value key api }); searchlist.getsearchdetails("no_results", "count").then(function(response){ $scope.searchdata.noresults = response.value; }); }]);

to extent works fine, can utilize 2-way binding print out values in view text. note: want able write values text trying utilize single scope object both chart , textual data.

{{searchdata.total | number}}

as mentioned, have written directive print specific chart data, in directive $scope.searchdata.charttitle property accessible. values set in functions not accessible in directive's link method:

here directive:

statsapp.directive('searchresultspiechart', function(){ return{ restrict : "a", scope:{ vals:'@vals' }, link: function($scope, $elem, $attr){ var dt_data = $scope.vals; var dt = new google.visualization.datatable(); dt.addcolumn("string","result type") dt.addcolumn("number","total") dt.addrow(["successful searches",dt_data.total]); dt.addrow(["no results",dt_data.noresults]); var options = {}; options.title = $scope.vals.title; var googlechart = new google.visualization.piechart($elem[0]); googlechart.draw(dt,options) } } });

here how using directive in view:

<div search-results-pie-chart vals="{{searchdata}}"></div>

i can see issue numeric values not available directive despite beingness available when bound view.

clearly directive needs called later when these items available or via callback (or perhaps exclusively different approach), unfortunately not sure why case or how go solving.

any help appreciated. hope makes sense.

i think next help you.

first alter directive scope binding vals utilize = instead of @ (see this question explanation of differences - @ interpolates value whereas = binds variable in parent scope)

then, move part of directive creates graph render function within link function.

then, $watch vals changes, phone call render function new values

you have alter approach of using ele[0], you'll need clear out contents of , add together new element new chart when info changes (otherwise many charts added info changes!)

here illustration of in link function regard $watch , new render function (changing $scope binding mentioned not shown):

$scope.$watch('vals', function(newvals, oldvals) { homecoming $scope.render(newvals); }, true); $scope.render = function (dt_data) { var dt = new google.visualization.datatable(); dt.addcolumn("string","result type") dt.addcolumn("number","total") dt.addrow(["successful searches",dt_data.total]); dt.addrow(["no results",dt_data.noresults]); var options = {}; options.title = $scope.vals.title; var googlechart = new google.visualization.piechart($elem[0]); googlechart.draw(dt,options) }

hope helps out!!!

angularjs http promise