Funktion innerhalb der Fabrik ist nicht erreichbar von benutzerdefinierter Richtlinie

Question

Ich habe einen Winkel App, die den folgenden Code in dem Skript hat:

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

Innerhalb scape.html, der folgenden Code verwendet wird:

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

Wie wir sehen können, versuche ich auf die Funktion zuzugreifen, die in der Fabrik FileAccessor von der benutzerdefinierten Richtlinie, country gestellt wird.

Wenn ich es auf Browser laufen, gibt es diesen Fehler, der auf der Konsole erscheint: angular.min.js: 86 Typeerror: FileAccessor.fetchCountryDetails ist keine Funktion

Kann jemand bitte erklären, was mit falsch entlang ging der feste Code?

P.S. Ich möchte, dass die HTTP-Anfragen nur durch die Fabrik (als Voraussetzung) verarbeitet werden.

Edit 1: Einschließlich der Plunkr Link hier: http://plnkr.co/edit/gXQKBd?p=info

Answer 1

Nachdem ich den Code analysiert und @CozyAzure zugestimmt habe, konnte ich sehen, dass es diesen Controller Ctrl gibt, der nichts im Skript macht.

Brauchen Sie das wirklich? Beseitigen Sie es aus Ihrer script.js und index.html und führen Sie einen Lauf. Dies würde sicherlich die Daten in der gewünschten Weise holen.

Answer 2

den Dienst in Ihrer Richtlinie Erklärung injizieren, NICHT in der Funktion der Kompilierung:

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: Es gibt eine ganze Reihe von Bugs in Ihrem Code, vielleicht möchten Sie die Dokumente lesen?

One: Verwenden link statt compile, wie link gibt Ihnen den Umfang aber compile nicht:

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: Entfernen Sie die ng-controller Richtlinie in Ihrer scape.html, da dies die Ihrer Richtlinie außer Kraft setzen:

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

Hier ist ein working plnkr