Функция внутри завода не доступны из пользовательской директивы

Question

У меня есть угловое приложение, которое имеет следующий код в скрипте:

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

Внутри scape.html, следующий код помещается:

<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> 

Как мы видим, я пытаюсь получить доступ к функции, которая помещается внутри фабрики, FileAccessor из пользовательской директивы, country.

Когда я запустить его в браузере, то эта ошибка, которая появляется на консоли: angular.min.js: 86 TypeError: FileAccessor.fetchCountryDetails не функция

Может кто-нибудь объяснить, что пошло не так, вместе с фиксированный код?

P.S. Я хочу, чтобы HTTP-запросы обрабатывались только через фабрику (как требование).

Edit 1: Включая ссылку Plunkr здесь: http://plnkr.co/edit/gXQKBd?p=info

Answer 1

После анализа кода и согласования с @CozyAzure я мог видеть, что есть этот контроллер Ctrl, который ничего не делает в скрипте.

Вам это действительно нужно? Устраните его из ваших script.js и index.html и выполните прогон. Это, несомненно, приведет к желаемому результату.

Answer 2

впрыскивать службу в вашей декларации директивы, НЕ в функции компиляции:

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: Есть целый ряд ошибок внутри вашего кода, может быть, вы захотите прочитать документы?

Один: Использование link вместо compile, поскольку link дает вам возможности, но compile не:

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

Два: Удалите ng-controller директиву в вашем scape.html, как это будет переопределение вашей директивы:

<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> 

Вот working plnkr