Question

我正在尝试获取一个指令，以便在我的控制器中数据发生变化时进行更新...目前我已经使用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>

然后我在控制器中有这个：

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

然后我在控制器中有这个超时来测试数据绑定：

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指令绑定到.donutData属性，其余视图更新但donut指令没有，我需要做什么才能使指令再次运行其链接函数？

Answer 1

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

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

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

AngularJS：如何在数据更改时获取更新指令？

1 个答案: