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 。

$scope.rows !== rows

引用不同。他们的内容是不同的。

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

Answer 2

您不需要使用angular.extend（）。将数组声明为$ scope变量：

$scope.rows = [];

并在setRows函数中也进行如下设置，视图将被更新：

$scope.rows = data;

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

2 个答案: