javascript - 将服务注入(inject)指令返回未定义

Question

我正在向指令中注入(inject)一个服务，在某些情况下该服务返回未定义的任何人都可以解释我做错了什么吗？

这是下面代码的一个plunker。 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

您的控制台中存在拼写错误，导致代码抛出错误。按照以下方式更改指令

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

工作演示:https://plnkr.co/edit/HhmOYyoZAhm6vvXp3puC?p=preview