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

Question

我正在尝试观察服务中的数组何时更新。 我使用基于指令的控制器中的函数在服务中更新此数组。 现在由于某种原因，第二个指令的链接函数中没有调用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);
    }

};
}]);

控制器

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

您的观察者真正在做的是尝试在指令范围内观察一个名为x的变量。 但是您的变量x只是常规局部变量，因此您的观察者不会触发。 所以您的观察者基本上可以转换为：

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

您可能会明白为什么它不触发。 没有变量$scope.x 。 相反，您应该尝试通过指定监视功能来直接监视服务。 像这样：

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