为什么此应用程序中的绑定无法更新？

Question

我的控制器上有一个数组，通过绑定显示在页面上。我想使用 set 函数来更新这个值并在页面上显示新值。

这个过程背后的整个想法是，我正在处理通过 API 调用从数据库中获取的数据。数据到达很好，我似乎无法将其用于进一步处理。

我正在运行 Angularjs 1.6.4。

HTML 看起来像这样

<div ng-controller="CtrlName">
  <div ng-repeat="item in rows track by $index">{{item}}</div>
</div>

这样的控制器

let rows = [1,2,3,4,5]

function getAllData() {
    qGetAllData().then(function(data) {
        console.log(data);
        setRows(data);
    }, function(errData) {
        console.log(errData);
    });
};

function qGetAllData()  {
    return $q(function(resolve, reject) {
        try {
        resolve(APISvc.get('PHP/API/ROUTE', {}));
        }
        catch {
            reject('fetching data failed');
        }
    });
};

function setRows(data) {
    console.log(typeof(data));
        //rows.push('test');
        //rows.push(data);
        rows = data;
};

angular.extend($scope, {
    getAllData : getAllData,
    qGetAllData: qGetAllData,
    setRows    : setRows,
    rows       : rows,
});

发生的情况是，当我调用页面时，我得到的行数组显示为初始设置的值 1 到 5。然后我从数据库中获取数据并将其传递给 setRows 函数。什么都没发生。我希望显示的数据会发生变化。

奇怪的是，如果我取消注释两个 push() 命令，数据会被推送，视图也会相应更新。

我在这里缺少什么？我怀疑消化周期是这里的罪魁祸首，但我不太确定。

Answer 1

function setRows(data) {
    console.log(typeof(data));
        //rows.push('test');
        //rows.push(data);
        ̶r̶o̶w̶s̶ ̶=̶ ̶d̶a̶t̶a̶;̶
        $scope.rows = data;
};

赋值语句正在替换局部变量的引用，而不是分配给 $scope 属性的引用。

---

但是当我使用rows.push() 时，为什么视图会相应地更新？

当代码执行时：

angular.extend($scope, {
    getAllData : getAllData,
    qGetAllData: qGetAllData,
    setRows    : setRows,
    rows       : rows,
});

名为rows 的$scope 属性设置为与名为rows 的私有变量相同的引用。

$scope.rows == rows //the references are identical

此时它们共享相同的内容。诸如.push() 之类的操作会改变该内容。

当代码进行赋值时

rows = response.data;

然后私有变量得到一个新的reference和新的contents。

$scope.rows !== rows

引用不同。它们的内容不同。

AngularJS 监视 $scope.rows 仍然引用旧内容。