pass service variables to directive - angularjs

Question

I am trying to fetch data from json file in a service fetchJsonDir and want to use response in a directive mcsaForm to count the total number of options in json file and create radio buttons depend on the number of options by using DOM. I can access the json file inside $http.get() method but not able to access outside of it.
How can I access the getObj variable in mcsaForm directive and where do I write the code for creating radio buttons dynamically in directive so that it all happens on form load?
json file
{
"Options" :
{
"Option1" : "Option one",
"Option2" : "Option two",
"Option3" : "Option three",
"Option4" : "Option four"
}
}
service:
myApp.service("fetchJsonDir", function($http){
var getObj;
var myJsonFilePath = "json/myNewJson.json";
$http.get(myJsonFilePath)
.success(function(response){
getObj = response;
console.log(getObj); // output: json file object
});
console.log(getObj); // output: undefined
return{
getObjOne : getObj
}
});
directive:
myApp.directive("mcsaForm",['fetchJsonDir', function(fetchJsonDir){
return{
restrict: "C",
templateUrl: "templateBlocks/multChoiceSingleSel.html",
compile: function(element, attrs)
{
$("#mcss_option_list").append("How are you?");
},
controller: function($scope){
$scope.getObjs = fetchJsonDir.getObjOne;
console.log(fetchJsonDir.getObjOne); //output: undefined
console.log($scope.getObjs); //output: undefined
$scope.onSubmitHidePanel = function()
{
$(".mcsa_form").fadeOut("slow", function(){
$(this).remove();
});
}
}
}
}]);

Answer 1

You get json from the server-side so you need to wait untill the server returnes response. Change the service to:
myApp.service("fetchJsonDir", function($http){
var myJsonFilePath = "json/myNewJson.json";
return $http.get(myJsonFilePath)
});
And directive to:
myApp.directive("mcsaForm",['fetchJsonDir', function(fetchJsonDir){
return{
restrict: "C",
templateUrl: "templateBlocks/multChoiceSingleSel.html",
compile: function(element, attrs)
{
$("#mcss_option_list").append("How are you?");
},
controller: function($scope){
fetchJsonDir.then( function( data ){
$scope.getObjs = data.data;
});
$scope.onSubmitHidePanel = function()
{
$(".mcsa_form").fadeOut("slow", function(){
$(this).remove();
});
}
}
}
}]);

Answer 2

Your service should return a promise rather then the object like this
myApp.factory("fetchJsonDir", function($http){
var myJsonFilePath = "json/myNewJson.json";
return{
getObjOne : $http.get(myJsonFilePath)
}
});
Then you can use it in the directive as follows:
myApp.directive("mcsaForm",['fetchJsonDir', function(fetchJsonDir){
return{
restrict: "C",
templateUrl: "templateBlocks/multChoiceSingleSel.html",
compile: function(element, attrs)
{
$("#mcss_option_list").append("How are you?");
},
controller: function($scope){
fetchJsonDir.getObjOne().then(function(response){
$scope.getObjs = response.data;
console.log($scope.getObjs);
});
$scope.onSubmitHidePanel = function()
{
$(".mcsa_form").fadeOut("slow", function(){
$(this).remove();
});
}
}
}
}]);
Remember, you are sending an asynchronous ajax request,you need to handle asynchronous operations through promises.
Also note that since you are returning an object from you service, it should be decalred as a factory.