弹出后的离子刷新列表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹出后的离子刷新列表相关的知识,希望对你有一定的参考价值。

我有一个简单的应用程序,显示列表中的数据库记录。

一切都很完美,除了我在编辑项目或添加新项目时无法刷新列表。

我在弹出窗口中编辑和添加项目,这可能是导致问题的原因。你知道我退出弹出窗口后可以强制列表刷新的方法吗?

我的代码如下:

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'ngResource', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
      if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function ($stateProvider, $urlRouterProvider) {

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/');

    $stateProvider

    .state('home', {
        url: '/',
        views: {
            'header': {
                templateUrl: 'templates/header.html',
                controller: 'headerCtrl'
            },
            'content': {
                templateUrl: 'templates/content.html',
                controller: 'contentCtrl'
            },
            'footer': {
                templateUrl: 'templates/footer.html',
                controller: 'footerCtrl'
            }
        }
    });

});

controller.js

angular.module('starter.controllers', [])

.controller('headerCtrl', function ($scope, $ionicListDelegate, $ionicPopup, Users) {

    // Triggered by clicking the 'show delete buttons' button in header.html
    $scope.toggleDelete = function () {
        $ionicListDelegate.showDelete(!$ionicListDelegate.showDelete()); // toggle delete buttons in list
    };

    // Triggered by clicking the 'add user' button in header.html
    $scope.addUser = function () {
        $scope.user = new Users();
        // An elaborate, custom popup
        var myPopup = $ionicPopup.show({
            templateUrl: 'templates/userform.html',
            title: 'Add new user',
            subTitle: 'Firstname is mandatory',
            scope: $scope,
            buttons: [
              { text: 'Cancel' },
              {
                  text: '<b>Save</b>',
                  type: 'button-positive',
                  onTap: function (e) {
                      if (!$scope.user.firstname) {
                          // Prevent save if first name is empty
                          e.preventDefault();
                      } else {
                          $scope.user.id = 0;
                          $scope.user.$save();
                      }
                  }
              }
            ]
        });
    };

})

.controller('contentCtrl', function ($scope, $ionicPopup, Users) {

    // Populate list with all items from database
    $scope.users = Users.query();

    // Triggered by clicking the 'delete user' button in content.html
    $scope.onItemDelete = function (user) {
        $scope.users.splice($scope.users.indexOf(user), 1); // remove the deleted item from the list
        user.$delete(); // delete the record from the database
    };

    // Triggered by clicking the 'edit user' button in content.html
    $scope.editUser = function (user) {
        $scope.user = Users.get({ id: user.id });
        // An elaborate, custom popup
        var myPopup = $ionicPopup.show({
            templateUrl: 'templates/userform.html',
            title: 'Edit user',
            subTitle: 'Firstname is mandatory',
            scope: $scope,
            buttons: [
              { text: 'Cancel' },
              {
                  text: '<b>Save</b>',
                  type: 'button-positive',
                  onTap: function (e) {
                      if (!$scope.user.firstname) {
                          // Prevent save if first name is empty
                          e.preventDefault();
                      } else {
                          $scope.user.$update();
                      }
                  }
              }
            ]
        });
    };

});

如前所述,保存和更新正常工作 - 数据库已更新。

当弹出窗口关闭时,我无法让列表刷新。

我在app.js的'content'状态尝试过cache: false,但是没有用。

有任何想法吗?

答案

我发现了一种有效的方法,但如果有人有更好的方法,请在这里发布。

弹出窗口关闭后使用$state.reload();重新加载列表

$ionicPopup.show({
    templateUrl: 'templates/userform.html',
    title: 'Edit user',
    subTitle: 'Firstname is mandatory',
    scope: $scope,
    buttons: [
      { text: 'Cancel' },
      {
          text: '<b>Save</b>',
          type: 'button-positive',
          onTap: function (e) {
              if (!$scope.user.firstname) {
                  // Prevent save if first name is empty
                  e.preventDefault();
              } else {
                  $scope.user.$update();
              }
          }
      }
    ]
}).then(function (res) { $state.reload(); });
};

以上是关于弹出后的离子刷新列表的主要内容,如果未能解决你的问题,请参考以下文章

如果堆栈大小> 1,则弹出后 SwiftUI3 导航链接不起作用

如何在离子中刷新视图

模式弹出后引导3禁用背景[重复]

DevExpress LookupEdit 控件,如何设置不弹出下拉框。现在的做法是弹出后马上关闭,但总会闪一下出来。。

ios 键盘在弹出后无法点击

片段中的 notifyDataSetChanged() 不刷新列表视图