Как обновить мою область $ $ после добавления новых элементов?

Question

У меня проблема с моим контроллером. Я использую ионные (угловые) и js-данные. когда я добавляю новый элемент через 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 в окне браузера?

Answer 1

Вы создаете элемент и обновляете базу данных. но вы не обновляете $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 2

Вы не храните созданный элемент нигде в вашем контроллере. Я предполагаю, что foo.create возвращает элемент, я прав? Если это так, возможно, что-то вроде этого может работать:

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

Answer 3

Если вы используете 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 });
  };
})

Answer 4

Это может решить проблему:

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