Question

我有一项服务可以加载一些数据，然后将其存储到本地存储中，用于Angular基础移动应用程序。我在我的主JS文件的run函数中调用了这个服务，如下所示：

angular.module('myApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
})
.run(function (StartupService) {
    StartupService.initialDataLoad();
})

此数据加载到本地存储，然后在第一个视图控制器的init函数中，我尝试在本地存储中访问此数据并将其显示在列表中：

angular.module('MemberInduction').controller('InductionListCtrl', function($scope, DataAccessService) {
    $scope.init = function init() {
        if (localStorage.getItem('MI.ApplicationData') != null) {
            var data = DataAccessService.getInductionList();
            $scope.inductionsList = data;
        } else {
            $scope.displayReloadMsg = true;
        }
    }
    $scope.init();
});

正如您在我的init（）函数中看到的，我通过服务访问数据，但是当控制器初始化时，数据可能会加载到localStorage中，但在初始化时数据不存在。所以我的displayReloadMsg标志设置为true，向用户发出一条消息，告诉他们重新加载应用程序以显示加载的数据。

如果数据加载成功后如何让视图初始化？这样一旦数据加载后，视图和控制器只从localStorage加载？

由于

斯蒂芬

Answer 1

您希望在主控制器上使用resolve以确保在访问控制器之前加载数据。

请参阅此示例：https://thinkster.io/egghead/resolve-conventions

在下面的示例中，如果Flickr.search()未返回任何数据，则不会发生状态转换 - 此示例的完整来源位于此处 - http://codepen.io/aaronksaunders/pen/gboQVO

.state('flickr-display', {
  url: '/flickr-display:query',
  templateUrl: 'flickr-display.html',
  controller: 'FlickrDisplayCtrl as flkr',
  resolve : {
    ImageData : function($stateParams, Flickr) {
      return Flickr.search($stateParams.query);
    }
  }

在启动时加载数据并通过AngularJS中的控制器显示

1 个答案: