Почему не удается обновить привязку в этом приложении?

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,
});

Свойство $ scope с именем rows имеет ту же ссылку, что и частная переменная с именем rows.

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

На данный момент они разделяют одно и то же содержание .Операция, такая как .push(), изменяет это содержимое .

Когда код выполняет присваивание

rows = response.data;

, тогда приватная переменная получает новую ссылку с новым содержанием .

$scope.rows !== rows

Ссылки разные.Их содержимое отличается.

AngularJS следит за $scope.rows, который все еще ссылается на старое содержимое.

Answer 2

Вам не нужно использовать angular.extend ().Объявите массив как переменную $ scope:

$scope.rows = [];

и в функции setRows также установите его следующим образом, и представление будет обновлено:

$scope.rows = data;