$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。相反，您应该尝试通过指定 watch 函数直接观看服务。像这样：

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