javascript - AngularJS:当数据更改时如何获取更新指令？

Question

我试图在 Controller 中的数据发生变化时获取更新指令...目前我已经获得 ng-repeat 来更新某些值，但重复内的指令似乎不会再次被调用。

我有一个像这样的指令:

app.directive("donut", function () {
return {
    restrict: 'E',
    scope: {
        donut: '='
    },
    replace: true,
    link: link
};

function link($scope, $elem, $attr) {
    var chart = {
        //chart functionality
    }
    $scope.$watch($scope.donut,function(){chart.createChart($elem, $scope.donut)});
}
}

我的 html 中有这个:

<donut class="donut-holder-inventory" donut="data.donutData"></donut>

然后我在 Controller 中有这个:

$scope.regions = [
    {
        region: 'Team Number One',
        data: [
            {
                title: 'Number One',
                subtitle: 'Quantity Available',
                daysSupply: 0,
                targetNumber: 108,
                actualNumber: 46,
                targetPercentage: 1,
                actualPercentage: 0,
                color: 'red',
                donutData: {
                    name: 'Number One',
                    fullscale: false,
                    fullsection: 108,
                    values: [46],
                    labeltext: ['% to goal'],
                    labelunits: "percent",
                    color: ["#f44336"],
                    labels: false,
                    height: 150
               }
           }
       }
  ]

然后我在 Controller 中设置超时只是为了测试数据绑定(bind):

function timerFunc(dat) {
    $scope.$apply(function () {
        console.log("changing")
        var dat = $scope.regions;
        for (var x = 0; x < dat.length; x++) {
            var cdat = dat[x].data;
            for (var c = 0; c < cdat.length; c++) {
                console.log(cdat[c].targetNumber)
                var nval = Math.round($scope.regions[x].data[c].actualNumber + (Math.random() * 1000))
                $scope.regions[x].data[c].targetNumber = nval;
                $scope.regions[x].data[c].donutData.fullsection = nval;
            }
        }
    });
};
var timer = setInterval(function () {
    timerFunc()
}, 1000);

donut 指令绑定(bind)到 .donutData 属性， View 的其余部分会更新，但 donut 指令不会更新，我需要做什么才能使指令再次运行其链接函数？

Answer 1

使用 true 作为第三个参数调用 $watch:

 $scope.$watch("donut", function(){chart.createChart($elem, $scope.donut)}, true);

默认情况下，在 JavaScript 中比较两个复杂对象时，将检查它们的“引用”相等性，即询问两个对象是否引用同一事物，而不是“值”相等性，即检查所有对象的值是否相同这些对象的属性是相等的。