添加新元素后如何更新我的 $scope？

Question

我的控制器有问题。我使用 ionic (angular) 和 js-data。当我通过 addItem() 添加新项目时，只有当我通过 F5 重新加载页面时才会看到它。

这是我的代码：

.controller('FooCtrl', function($scope, $ionicPlatform, foo) {
    $ionicPlatform.ready(function() {
        foo.findAll().then(function (items) {
            $scope.items = items;
        });
    });

    $scope.item = {};
    $scope.addItem = function () {
        foo.create({ name: $scope.item.name });
    };
})

如果不先在浏览器中按 F5，我需要做什么才能看到新元素 window？

Answer 1

这可能会解决问题：

 foo.findAll().then(function (items) {
            $scope.items = items;
            $scope.$apply();
        });

Answer 2

您正在创建项目并更新数据库。但你没有更新 $scope.items。所以将项目推送到 $scope.items 或者您可以在创建后立即调用此代码。它会更新你 $scope.items

foo.findAll().then(function (items) {
                $scope.items = items;
            });

使用此代码：

.controller('FooCtrl', function($scope, $ionicPlatform, foo) {
    $ionicPlatform.ready(function() {
        foo.findAll().then(function (items) {
            $scope.items = items;
        });
    });

    $scope.item = {};
    $scope.addItem = function () {
        foo.create({ name: $scope.item.name });
        $scope.items.push({ name: $scope.item.name });
    };
})

或

.controller('FooCtrl', function($scope, $ionicPlatform, foo) {
    $ionicPlatform.ready(function() {
        foo.findAll().then(function (items) {
            $scope.items = items;
        });
    });

    $scope.item = {};
    $scope.addItem = function () {
        foo.create({ name: $scope.item.name });
           foo.findAll().then(function (items) {
                $scope.items = items;
            });
    };
})

Answer 3

您没有将创建的项目存储在控制器中的任何位置。我认为 foo.create returns 是一个项目，对吗？如果是这样的话，也许这样的事情可以奏效：

$scope.addItem = function () {
    var item = foo.create({name: $scope.item.name});
    // this assumes that $scope.items is an array
    $scope.items.push(item);
};

Answer 4

如果您正在使用 js-data-angular，那么您还可以：

.controller('FooCtrl', function($scope, $ionicPlatform, foo) {
  $ionicPlatform.ready(function() {
    // retrieve that initial list of items
    foo.findAll();

    // $scope.items will be kept up-to-date with
    // the foo items in the store
    foo.bindAll(null, $scope, 'items');
  });

  $scope.item = {};
  $scope.addItem = function () {
    // thanks to the bindAll above, the
    // created item will be rendered
    // automatically
    foo.create({ name: $scope.item.name });
  };
})

添加新元素后如何更新我的 $scope？

How to update my $scope after adding new elements?

javascript

angularjs

ionic

jsdata