$watchCollection 未被触发

Question

我有以下指令：

    app.directive('rickshawChart', function()
{
    return{
        $scope: {
            data: '=',
            renderer: '='
        },
        template: '<div></div>',
        restrict: 'E',
        link: function postLink(scope, element, attrs)
        {
           scope.$watchCollection('[data,renderer]', function(newVal, oldVal)
           {
                if(!newVal[0])
                {
                    return;
                }
               var graphEl = element.find("div:first");
               graphEl.html('');
               var graph = new Rickshaw.Graph({
                   element: graphEl[0],
                   width: attrs.width,
                   height: attrs.height,
                   series: [{data: scope.data, color: attrs.color, name: attrs.series}],
                   renderer: scope.renderer
               });
               graph.render();
           });
        }

    }
});

具有以下html：

<rickshaw-chart
        data="sightingByDate"
        color="green"
        renderer="renderer"
        width="100%"
        height="100%">
</rickshaw-chart>

这里我用以下控制器填写数据：

    app.controller('CompetenceController', ['$http', '$scope','$sessionStorage','$log','Session','api',  function ($http, $scope, $sessionStorage,$log, Session, api) {

    $scope.result =[ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ];
    $scope.renderer = 'scatterplot';
    $scope.sightingsByDate = _($scope.result)
        .chain()
        .countBy(function(sighting){
            return sighting.y;
        })
        .pairs()
        .map(function(pair){
            return pair;
        })
        .value();
}]);

但是从调试器中我可以看到 $watchCollection 从未执行过。

我做错了什么？

Answer 1

正如doc所说

Shallow watches the properties of an object and fires whenever any of the properties change (for arrays, this implies watching the array items; for object maps, this implies watching the properties). If a change is detected, the listener callback is fired.

监视集合仅用于对象和数组的浅拷贝:) 在你的情况下，这两件事都只是价值而不是数组或对象。

所以我猜你需要 $watchGroup 来完成你的工作。

$scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) {.. }

Answer 2

您应该使用带有 true 作为第三个参数的 $watch 表达式：

scope.$watch('[data,renderer]', function (newVal, oldVal) {
         //code
 }, true);

$watchCollection 对您不起作用，因为您同时拥有数组和属性。在这种情况下就像您同时检查 $scope.$watch('data' 和 $scope.$watch('renderer'。而如果数组中的一个属性发生变化，则事件不会触发。

有四种$watch:

最简单的是$watch，它只是检查属性或整个对象是否改变
第二个是 $watchCollection，它监视数组中是否有任何属性发生变化（在您的情况下这不起作用，因为您同时拥有数组和属性）
第三个是 $watchGroup（自 1.3 起），它是 $watchCollection 的最新版本，它允许您检查表达式数组（但同样可以用 $watchCollection 就像你想做的那样
$watch('object', function(){...}, true)。这将检查对象

这是您的代码的简化版本，如果您按下更改值按钮，您可以看到数组中的元素是如何更改的以及事件是如何在控制台中触发的： http://jsfiddle.net/27gc71bL/

编辑：我忘了在我的回答中添加一些东西。我认为您的代码中有错字，您正在使用以下命令创建指令：

        $scope: {
            data: '=',
            renderer: '='
        },

这不是在指令中创建新范围。因此，当您在 link 函数中使用 scope.data 时，您指的是父级（控制器）的 $scope.data。

我想你想要的是以这种方式创建一个新范围：

        scope: {
            data: '=',
            renderer: '='
        },

然后，在您的控制器中，将要检查的数组绑定到 sightingByDate。

Answer 3

只要 sightingByDate 或 renderer 某处被修改，代码看起来就是正确的。也许，这在您的代码片段中并不明显。确保其中任何一个或两个都在您的流程中的某处发生变化以触发 WatchCollection

$watchCollection 未被触发

$watchCollection is not triggered

javascript

watch

angularjs

angularjs-directive