angularjs - $watchCollection 需要的参数返回错误，当作为数组传递时

Question

我有一个了解一段代码的小查询。

我的印象是 $watchCollection 将监视数组 , 当根据以下语法作为参数传递时:

$watchCollection(obj, listener);

然而，我的查询在这段代码中:

  var exp = $parse(attrs.chartData);
  var salesDataToPlot=exp(scope);

然后用于:

scope.$watchCollection(exp, function(newVal, oldVal){
               salesDataToPlot=newVal;
               redrawLineChart();
           });

“exp”是函数类型，当我尝试将它作为数组传递时，出现“无法读取未定义的属性‘长度’”错误。
当我尝试此代码时出现该错误:

  var salesData = scope[iAttrs.chartData];

.
.
.
.

  scope.$watchCollection(salesData, function(newVal, oldVal){
                   salesDataToPlot=newVal;
                   redrawLineChart();
               });

为什么我不能将 salesData 作为数组传递给 $watchCollection？

Here's my pen

Answer 1

$parse service 接受一个表达式，并将其转换为一个函数，当给定上下文(通常是作用域)时，该函数将解析为实际数据。

  var exp = $parse(attrs.chartData); // exp is an expression function that needs context
  var salesDataToPlot=exp(scope); is the actual result of supplying exp with context - the scope. The result is the array you need

只需观看 salesDataToPlot ( pen ):

scope.salesDataToPlot = salesDataToPlot;

scope.$watchCollection('salesDataToPlot', function(newVal, oldVal){
               salesDataToPlot=newVal;
               redrawLineChart();
           });

直接使用 salesData 会引发错误，因为 salesData 是作用域上的属性，而不是此闭包中可用的变量。要让 $watchCollection 在范围内查找此属性，您必须使用 "salesData"( pen )。

  scope.$watchCollection("salesData", function(newVal, oldVal){
                   salesDataToPlot=newVal;
                   redrawLineChart();
               });