javascript - AngularJS で GET リクエスト後にページ コンテンツを更新する

Question

私のページには、ng-repeat='item in items'繰り返し処理するがあり$scope.itemsます。 $scope.itemsが呼び出されたときにデータ$scope.listItemsを取得します。これは、データベースに接続された REST API から $http get data を使用します。

最初$scope.itemsにコントローラーを呼び出して $scope.items を初期化し、データを入力します。

追加すると、変更がデータベースに反映されているため、$http が機能していることがわかります。$scope.items私のコンソールロギングに従っても変更されます。ただし、ページは更新されて変更を反映しません。

私は使用する必要があると思います$scope.$apply()が、「エラー: $digest は既に進行中です」というメッセージが表示されるので、適切に使用していません。私は AngularJS を初めて使用し、一般的に Javascript の多くを知らないので、私の無知に耐えてください。

これが私のコードです。

var app = angular.module('App', []);
app.controller('AppCtrl', function ($scope, $http) {
  $scope.listItems = function () {
    $http({method: 'GET', url: '/api/items'})
      .success(function (data, status, headers, config) {
        $scope.items = data;
        console.log($scope.items);
      })
      .error(function (data, status, headers, config) {
        $scope.items = data || 'Request failed';
        $scope.status = status;
      });
  }
  $scope.addItem = function () {
    $scope.itemDetails.node_type = 'record'; // since input hidden doesnt work
    $http({method: 'POST', url: '/api/items/add', data: $scope.itemDetails, 
           headers: {'Content-Type': 'application/json'}})
      .success(function (data, status, headers, config) {
        $scope.status = status;
        $scope.listItems();
        //$scope.$apply(); // throws an error
      })
      .error(function (data, status, headers, config) {
        $scope.status = status;
      });
  }
  $scope.listItems(); // initialize $scope.items
});