javascript - 为什么此应用程序中的绑定(bind)无法更新？

Question

我的 Controller 上有一个数组，它通过绑定(bind)显示在页面上。我想使用 set 函数来更新该值并在页面上显示新值。

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

我正在运行 Angularjs 1.6.4。

HTML 看起来像这样

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

像这样的 Controller

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() 命令，数据就会被推送， View 也会相应更新。

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

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 属性的引用。

<小时/>

but why would the view be updated accordingly when i use rows.push()?

当代码执行时:

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

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

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

此时他们共享相同的内容。 .push() 等操作会改变内容。

当代码执行分配时

rows = response.data;

然后私有(private)变量获得一个新的引用和新的内容。

$scope.rows !== rows

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

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