Javascript $watch在服务中的阵列上不工作指令

我试图观察服务中的阵列何时更新。我在服务中使用基于指令的控制器中的函数更新此数组。现在由于某种原因，第二个指令的link函数中没有调用watch函数。为什么在第二个指令中不调用watch。我试图更新第二个指令中变量的作用域，以便在第一个指令函数更新服务时更新它

服务

var productServices = angular.module('productServices', ['ngResource']);
productServices.factory('PlayerListS', [function() {
    var playerList = [];

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

    return {
        addToList :addToList,
        getList: getList
    }
}]);

指令

'use strict';

bands.directive("player",['PlayerListS', function (PlayerlistS) {
return {
    restrict: 'E',
    scope: {
        person:'@person',
        add:'&add'
    },
    replace: false,
    templateUrl: "partials/player.html",
    controller: function($scope, $element, $compile) {
        $scope.playerList = ["A", "B"];
        $scope.add = function(name) {
            PlayerlistS.addToList(name);
            PlayerlistS.getList();

        }

    },
    link: function(scope, el, attrs) {

    }

};
}]);
bands.directive("playerList", ['PlayerListS', function (PlayerlistS) {
return {
    restrict: 'E',
    replace: false,
    template: "<p>Test</p>",
     controller: function($scope, $element, $compile) {
    },
    link: function($scope, $el,$attrs) {
        console.log('added');
        var x = PlayerlistS.getList()

/*THIS IS WHERE THE WATCH IS HAPPENING*/
        $scope.$watch('x', function (newVal, oldVal) {
                console.log("CHANGED");
        }, true);
    }

};
}]);

HTML

---

如果HTML中存在拼写错误，则应为：

<player-list ng-show="true" ng-repeat="a in playerList"></player-list>

---

您的观察者真正做的是在指令范围内观察一个名为

x

的变量。但是您的变量

x

只是一个常规的局部变量，因此您的观察者不会触发。所以你的观察者基本上是这样翻译的：

$scope.$watch(function(scope){
    return scope['x'];
}, function (newVal, oldVal) {
    console.log("CHANGED");
}, true);

你可能会明白为什么它不会触发。没有变量

$scope.x

。相反，您应该尝试通过指定watch函数直接监视服务。像这样：

$scope.$watch(function(){
    return PlayerlistS.getList();
}, function (newVal, oldVal) {
    console.log("CHANGED");
}, true);

---

您的控制台中是否出现任何错误？@Vivz no no error what so ever.。尝试

$watchCollection

一旦出现此示例，您是否知道如何应用newVal，以便在ng repeat更新中使用范围变量并显示新值？从技术上讲，您的ng repeat只会创建您的控制台的多个实例playerList指令。我相信您真正想要的是在

playerList

-指令的模板中使用ng repeat。例如，

{{player}

。

$scope.$watch(function(scope){
    return scope['x'];
}, function (newVal, oldVal) {
    console.log("CHANGED");
}, true);

$scope.$watch(function(){
    return PlayerlistS.getList();
}, function (newVal, oldVal) {
    console.log("CHANGED");
}, true);