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

您应该将$watch表达式与true一起用作第三个参数：

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: '='
        },

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

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

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

并在控制器中将要检查的数组绑定到sightingByDate。

Answer 2

正如doc所说

浅看物体的属性并在任何时候发射属性改变（对于数组，这意味着观察数组项目;对于对象图，这意味着观察属性）。如果一个检测到更改，将触发侦听器回调。

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

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

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

Answer 3

只要某个地方 sightingByDate 或渲染器被修改，代码看起来就是正确的。也许，这在您的代码段中并不明显。确保在您的流程中的任何位置更改其中任何一个或两个以触发 WatchCollection

$ watchCollection未被触发

3 个答案: