弹出后的离子刷新列表答案

【问题标题】：Ionic refresh list after popup弹出后的离子刷新列表
【发布时间】：2016-11-13 18:43:10
【问题描述】：

我有一个简单的应用程序，它以列表的形式显示数据库中的记录。

除了在编辑项目或添加新项目时无法刷新列表之外，一切都运行良好。

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

我的代码如下：

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 中的“内容”状态下尝试过 cache: false，但没有成功。

有什么想法吗？

【问题讨论】：

你在内容中说，你的意思是你试过 ?
不，在 app.js 中像这样 .state('home', { url: '/', views: { 'header': { templateUrl: 'templates/header.html', controller: 'headerCtrl' }，'content'：{缓存：false，templateUrl：'templates/content.html'，控制器：'contentCtrl'}，'footer'：{ templateUrl：'templates/footer.html'，控制器：'footerCtrl ' } } });

标签： angularjs ionic-framework popup refresh

【解决方案1】：

我找到了一种可行的方法，但如果有人有更好的方法，请在此处发布。

在弹出窗口关闭后使用$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(); });
};

【讨论】：