Question

我使用Ionic和AngularJS创建了一个简单的应用程序，它从一个视图中获取值，将数据存储到SQLite数据库中，然后在另一个视图中显示添加的值。我已经使用了ion-tabs来显示视图。但是当我在添加项目后切换到另一个视图时，我无法看到附加值。我需要关闭应用程序并再次启动它以查看更新列表。

当我切换到视图时，有什么方法可以重新加载视图吗？

HTML

  <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="Home" icon="ion-home" ui-sref=".home">
      <ion-nav-view name="tab-home">
      </ion-nav-view>
    </ion-tab >
    <ion-tab title="Add Item" icon="ion-plus-round" ui-sref=".AddItem">
      <ion-nav-view name="tab-item"></ion-nav-view>
    </ion-tab>
    <ion-tab title="View Items" icon="ion-navicon-round" ui-sref=".ViewItems">
      <ion-nav-view name="tab-viewitems"></ion-nav-view>
    </ion-tab>
  </ion-tabs>

JS

 .state('AddList.ViewItems', {
      url: '/viewitems',
      reload:true,
      views:{
        'tab-viewitems':{
          templateUrl: 'templates/ViewItems.html',
          controller: 'ExampleController',
        }
      }
    })

我甚至添加了重新加载：true＆＃39;在其州内，但它仍然无法运作。 :( 请帮忙。在此先感谢：）

控制器

var example=angular.module('starter', ['ionic', 'ngCordova']);

example.controller("ExampleController", function($scope, $cordovaSQLite, $state, $ionicPopup)

 $scope.enter = function (purchasetype, stonename, size, weight, pieces, color, shape, salesprice) {
    var query = "INSERT INTO items_list (purchasetype,stonename,size,weight,pieces,color,shape,,salesprice) VALUES (?,?,?,?,?,?,?,?)";
    $cordovaSQLite.execute(db, query, [purchasetype, stonename, size, weight, pieces, color, shape, salesprice]).then(function (res) {
      var alertPopup = $ionicPopup.alert({
        title: 'Successful!',
        template: 'Record entered!'
      });
    }, function (err) {
      console.log(err);
      window.alert(err);
      });
  };

Answer 1

您可以尝试在同一控制器中使用插入函数末尾的$scope.$apply();。

另一种解决方案如下。

设置标签：

 <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="Home" icon="ion-home" ng-controller="HomeCtrl" ui-sref=".home">
        <ion-nav-view name="tab-home">
        </ion-nav-view>
    </ion-tab >
    <ion-tab title="Add Item" icon="ion-plus-round" ng-controller="AddItemCtrl" ui-sref=".AddItem">
        <ion-nav-view name="tab-item"></ion-nav-view>
    </ion-tab>
    <ion-tab title="View Items" icon="ion-navicon-round" ng-controller="ViewItemsCtrl" ui-sref=".ViewItems">
        <ion-nav-view name="tab-viewitems"></ion-nav-view>
    </ion-tab>
</ion-tabs>

<强>控制器：

 example.controller("AddItemCtrl", function($scope, $cordovaSQLite, $state, $ionicPopup) {
$scope.enter = function (purchasetype, stonename, size, weight, pieces, color, shape, salesprice) {
    var query = "INSERT INTO items_list (purchasetype,stonename,size,weight,pieces,color,shape,,salesprice) VALUES (?,?,?,?,?,?,?,?)";
    $cordovaSQLite.execute(db, query, [purchasetype, stonename, size, weight, pieces, color, shape, salesprice]).then(function (res) {
        var alertPopup = $ionicPopup.alert({
            title: 'Successful!',
            template: 'Record entered!'
        });
    }, function (err) {
        console.log(err);
        window.alert(err);
    });
};
});

example.controller("ViewItemsCtrl", function($scope, $cordovaSQLite, $state, $ionicPopup){
// get values from DB..!
});

Answer 2

您可以为每个视图添加pull to refresh功能。

将此代码放入您的内容中，它会为您的视图添加“拉动刷新”功能，

<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
</ion-refresher>

确保你的观点最终结构看起来像这样，

<ion-view>
   <ion-content>
       <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
    </ion-refresher>
   </ion-content>
</ion-view>

希望有所帮助！

如何在Ionic和AngularJS中刷新视图以显示更新的数据

2 个答案: