javascript - 指令中范围的数组属性在引用时被清空

Question

我的指令如下所示：

angular.module('app')
  .directive('chart', function () {
      return {
          template: '<div class="chart"></div>',
          restrict: 'E',
          replace: 'true',
          scope: {
              data: '='
          },
          link: function (scope, element, attrs) {
              console.log(scope);
              console.log(scope.data);
          }
      };});

并从视图中的控制器传递一个数组。

<chart data="array"></chart>

控制台输出如下所示：

Scope {...}
$id: "006"
$parent: Child
$root: Scope
...
data: Array[1]
    0: 10300
    length: 1
    __proto__: Array[0]
this: Scope
__proto__: Object

和

[]

当 scope 对象显示在控制台中时，它有一个长度为 1 的“data”属性和条目“10300”，但是当 scope.data 被打印时，它只是一个空数组“[]”。

为什么？我很困扰 ：）

Answer 1

问题是数组在控制器中被初始化为 []，然后通过一个用 $watch 调用的函数填充。由于某种原因，两个控制台输出似乎打印了控制器的不同状态。解决方案是在控制器中调用一次函数以立即使用值初始化数组。