服务中的数组上的$ watch在指令中不起作用

Question

I am trying to watch when an array in a service is updated. I update this array in the service using a function in a directive based controller. Now for some reason the watch function does not get called in the link function of the second directive. Why is watch not being called in the second directive. I am trying to update the scope of a variable in the second directive so that it updates when the first directive function updates the service.

The Service

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

The Directives

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

};
}]);

The Controller

var bands = angular.module('bands', []);
bands.controller('ViewHousesCtrl',  ['$scope', '$element', '$routeParams', '$q',
function ViewHousesCtrl($scope, $element, $routeParams, $q) {

    $scope.playerLis = ["A","B","C"];

}]);

HTML

   <player ng-show="true" person="RandomName" add="add()"></player>
   <player-list ng-show="true" ng-repeat="a in playerLis"></player-list>

Answer 1

What your watcher is really doing, is trying to watch a variable called x on the directive scope. But your variable x is just a regular local variable, so your watcher doesn't trigger. So what your watcher basically translates to is this:

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

You can probably see why it doesn't trigger. There is no variable $scope.x . Instead you should try watching the service directly, by specifying the watch function. Like this:

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

Answer 2

您的HTML中有一个拼写错误，应该是：

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