AngularJs: How to pass scope from within $http.get, into directive? - angularjs

Question

I'm having trouble trying to populate a vector map from data in my database, using angular & directives.
I have an angular dashboard webpage that needs to display an svg vector map of the United States populated with data from my database. I'm following this tutorial, and everything works fine, however the tutorial passes hard coded values to the map. I need to modify this to accept database values, & that's where I'm having trouble. How can I make a call to my database and pass those values back to map, using a directive?
I'm still new to angular & this is my first experience with directives, but it appears as if the $http.get call happens after the directive, so I'm returning my db data too late. Here's my code:
App.js
Here, I'm using both directives for this map functionality. This all works fine:
var app = angular.module('dashboardApp', ['ngRoute', 'angularjs-dropdown-multiselect']);
app.controller('dashboardController', DashboardController);
app.directive('svgMap',function ($compile) {
return {
restrict: 'A',
templateUrl: '/Content/Images/Blank_US_Map.svg',
link: function (scope, element, attrs) {
var regions = element[0].querySelectorAll('path');
angular.forEach(regions, function (path, key) {
var regionElement = angular.element(path);
regionElement.attr("region", "");
regionElement.attr("dummy-data", "dummyData");
$compile(regionElement)(scope);
})
}
}
});
app.directive('region', function ($compile) {
return {
restrict: 'A',
scope: {
dummyData: "="
},
link: function (scope, element, attrs) {
scope.elementId = element.attr("id");
scope.regionClick = function () {
alert(scope.dummyData[scope.elementId].value);
};
element.attr("ng-click", "regionClick()");
element.attr("ng-attr-fill", "{{dummyData[elementId].value | map_color}}");
element.removeAttr("region");
$compile(element)(scope);
}
}
});
DashboardController.js
This is where my problem is. Here, I'm returning data from my database via an $http.get. I currently have my $scope.createDummyData function outside of this http.get & it works fine. If I place that code inside my $http.get however, data doesn't populate. And that's my problem:
var DashboardController = function ($scope, $http) {
$http.get('/Account/GetDashboardDetails')
.success(function (result) {
//need to place my $scope.createDummyData inside here
})
.error(function (data) {
console.log(data);
});
var states = ["AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL",
"IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM",
"NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VI", "VA",
"WA", "WV", "WI", "WY"];
$scope.createDummyData = function () {
var dataTemp = {};
angular.forEach(states, function (state, key) {
dataTemp[state] = { value: Math.random() }
});
$scope.dummyData = dataTemp;
};
$scope.createDummyData();
};
HTML
Finally, here's my html. I don't feel anything here pertains to my issue, but I included it anyway, just in case:
<div class="container">
<div svg-map class="col-md-8 col-sm-12 col-xs-12" style="height:350px;"></div>
<p>
<button ng-click="createDummyData()" class="btn btn-block btn-default">Create Dummy Data</button>
</p>
<div class="regionlist">
<div ng-repeat="(key,region) in dummyData">
<div>{{key}}</div>
<div>{{region.value | number}}</div>
</div>
</div>
</div>
How can I go about populating my map, via database data?
Thanks

Answer 1

The link function of the directive executes before the $http.get XHR receives a response. One approach is to use $watch to wait for the data:
app.directive('region', function ($compile) {
return {
restrict: 'A',
scope: {
dummyData: "="
},
link: function (scope, element, attrs) {
scope.elementId = element.attr("id");
scope.regionClick = function () {
alert(scope.dummyData[scope.elementId].value);
};
element.attr("ng-click", "regionClick()");
element.attr("ng-attr-fill", "{{dummyData[elementId].value | map_color}}");
element.removeAttr("region");
//Use $watch to wait for data
scope.$watch("::dummyData", function(value) {
if (value) {
$compile(element)(scope);
};
});
}
}
});
In the above example, the watch expression uses a one-time binding so that the $compile statement executes only once. If one wants the element to be re-compiled on every change of the data, it gets more complicated.
For more information on $watch, see AngularJS $rootscope.Scope API Reference - $watch

Answer 2

Not sure if this is what you're looking for exactly but might help.
I would create a service to grab the data (I'm assuming the HTTP to /Account/GetDashboardDetails returns a list of states) then call the service in your controller. Once the call is finished, you then call your create dummyDataFunction.
// Service
angular
.module('dashboardApp')
.service('$dataService', dataService);
dataService.$inject = ['$http']
function dataService() {
var service = {
getData : getData
}
return service;
//////////
function getData() {
return $http.get('/Account/GetDashboardDetails')
.then(function (result) {
return result;
},function(error) {
return error;
})
}
}
// Controller
var DashboardController = function ($scope,$dataService) {
$scope.dummyData = [];
activate();
/////////
function activate() {
$dataService.getData()
.then(function(states){
var dataTemp = {};
angular.forEach(states, function (state, key) {
dataTemp[state] = { value: Math.random() }
});
$scope.dummyData = dataTemp;
},function(error) {
console.log(error);
});
}
};

Answer 3

It doesn't matter if the link function of your svgMap directive is called way before you ever make an HTTP get request.
What you have is that the svgMap directive is dynamically creating region directives which are bound to dummyData from the outer controller scope.
Being bound to dummyData means Angular has already registered watchers for the bound property. Literally, this also means that this binding exists even before the properties are actually set on the scope elsewhere, i.e. the parent controller.
I suspect that the $scope.dummyData is not being assigned the returned data from the server properly.
From the code in your question, you are calling the success handler on the get request and getting the response back in the result variable. However, you've not mentioned how you are getting the data from the response. So, I reckon you might have mixed up the response from .then() callback with the success() callback:
In case of the .success() callback:
$http.get('/Account/GetDashboardDetails')
.success(function (result) {
$scope.dummyData = result // data exists in the `result` itself
})
In case of the .then() success callback:
$http.get('/Account/GetDashboardDetails')
.then(function (response) {
$scope.dummyData = response.data; // data is wrapped in `data`
})
If the above is not the case and you're sure enough that the returned data from the server is assigned to the scope properly, then try wrapping that portion of logic inside $timeout(). This triggers $scope.$apply() and ensures that changes in the $scope.dummyData are reflected properly in the view.
var DashboardController = function ($scope, $http, $timeout) {
$http.get('/Account/GetDashboardDetails')
.success(function (result) {
$timeout(function(){
/* Do something here */
$scope.dummyData = result;
});
})