Function inside factory is not accessible from custom directive - angularjs

Question

I have an angular App which has the following code in the script:
var myApp = angular.module('myApp', []);
myApp.controller('Ctrl', function($scope, FileAccessor) {
$scope.countrynames = []
});
myApp.directive('country', function() {
var directiveDefinitionObject = {
restrict: 'E',
templateUrl: 'partials/scape.html',
controllerAs: 'dm',
compile: function(scope, FileAccessor) {
FileAccessor.fetchCountryDetails('https://restcountries.eu/rest/v1/all').success(function(response) { //assigning the fetched countries to the scope object var
scope.countrynames = response;
});
}
}
return directiveDefinitionObject;
})
myApp.factory("FileAccessor", ['$http', function($http) {
return {
fetchCountryDetails: function(url) {
return $http.get(url);
}
}
}]);
Inside scape.html, the following code is placed:
<div ng-controller="Ctrl" class="container" style="height:500px" >
<select ng-model="model" ng-options="obj.name for obj in countrynames | orderBy: '-population'" placeholder="Select" autofocus>
<option value="">- Please Choose -</option>
</select>
{{model.name}}
{{model.currencies[0]}}
</div>
As we can see, I am trying to access the function which is placed inside the factory, FileAccessor from the custom directive, country.
When I run it on browser, there is this error that pops on console:
angular.min.js:86 TypeError: FileAccessor.fetchCountryDetails is not a function
Can somebody please explain what went wrong along with the fixed code?
P.S. I want the HTTP requests to be processed only through the factory(as a requirement).
Edit 1: Including the Plunkr link here: http://plnkr.co/edit/gXQKBd?p=info

Answer 1

Inject the service at your directive declaration, NOT in the compile function:
myApp.directive('country', function(FileAccessor) { //inject FileAccessor here
var directiveDefinitionObject = {
restrict: 'E',
templateUrl: 'partials/scape.html',
controllerAs: 'dm',
compile: function(scope) {
FileAccessor.fetchCountryDetails('https://restcountries.eu/rest/v1/all').success(function(response) { //assigning the fetched countries to the scope object var
scope.countrynames = response;
});
}
}
return directiveDefinitionObject;
})
Edit: There are quite a number of bugs inside your code, maybe you would want to read the docs?
One: Use link instead of compile, as link gives you the scope but compile doesn't:
myApp.directive('country', function(FileAccessor) {
var directiveDefinitionObject = {
restrict: 'E',
templateUrl: 'scape.html',
controllerAs: 'dm',
link: function(scope) {
scope.test="Hello";
FileAccessor.fetchCountryDetails('https://restcountries.eu/rest/v1/all').then(function(response) { //assigning the fetched countries to the scope object var
scope.countrynames = response.data;
});
}
}
return directiveDefinitionObject;
})
Two: Remove the ng-controller directive in your scape.html as this will override the of your directive:
<div class="container" style="height:500px"> //remove the ng-controller='Ctrl'
<select ng-model="model" ng-options="obj.name for obj in countrynames | orderBy: '-population'" placeholder="Select" autofocus>
<option value="">- Please Choose -</option>
</select>
{{model.name}} {{model.currencies[0]}}
</div>
Here's a working plnkr

Answer 2

After analysing your code and agreeing with #CozyAzure, I could see that there is this controller Ctrl which doesn't do anything in the script.
Do you really need this? Eliminate it from your script.js and index.html and do a run. This would surely fetch the data in the desired way.