Injizieren von Service in die Richtlinie zurückgibt undefined

Question

Ich injiziere einen Service in eine Direktive und für einige Instanz dieser Service zurück undefined kann jemand erklären, was ich falsch mache?

Hier ist ein Plünderer des Codes unten. https://plnkr.co/edit/H2x2z8ZW083NndFhiBvF?p=preview

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
$scope.name = 'World'; 
$scope.players = ["A","B","C"]; 
}); 

app.factory('PlayerListS', [function() { 
    var playerList = []; 

    function getList() { 
     return playerList; 
    } 
    function addToList(name) { 
     playerList.push(name); 
    } 

    return { 
     addToList :addToList, 
     getList: getList 
    } 

}]); 
app.directive("player",['PlayerListS', function (PlayerListS) { 
return { 
    restrict: 'E', 
    scope: { 
     person:'@person', 
     add:'&add' 
    }, 
    replace: false, 
    templateUrl: "player.html", 
    controller: function($scope, $element, $compile) { 
      $scope.add = function(name) { 
       PlayerListS.addToList(name); 
       console.log(PlayListS.getList()); 
      } 
    } 
}; 
}]); 

Answer 1

Sie haben einen Tippfehler in der Konsole wegen dem der Code einen Fehler wirft. Ändern Sie Ihre Richtlinie die folgende Art und Weise

app.directive("player",['PlayerListS', function (PlayerListS) { 
    return { 
     restrict: 'E', 
     scope: { 
      person:'@person', 
      add:'&add' 
     }, 
     replace: false, 
     templateUrl: "player.html", 
     controller: function($scope, $element, $compile) { 
       $scope.add = function(name) { 
       debugger; 
        PlayerListS.addToList(name); 
        console.log(PlayerListS.getList()); 
       } 
     } 
    }; 
}]); 

Working Demo: https://plnkr.co/edit/HhmOYyoZAhm6vvXp3puC?p=preview