Question

我是角度和离子的新手。基本上花了大约2个小时就可以了。

想知道是否有人可以在这里指出我正确的方向。

基本上在我的controller.js中我通过$ http加载远程json。

我想在每个加载远程内容的控制器上显示预加载器。

    .controller('InformationCtrl', function ($scope, $http, $ionicLoading) {
    $scope.show = function () {
        $ionicLoading.show({
            template: '<p>Loading...</p><ion-spinner></ion-spinner>'
        });
    };
    $scope.hide = function () {
        $ionicLoading.hide();
    };
    $scope.show($ionicLoading);
    $http.get($scope.base_url + "information")
        .then(function (response) {
            $scope.hide($ionicLoading);
            $scope.information = response.data;
        }, function errorCallback(response) {
            $scope.hide($ionicLoading);
            alert("error loading content");
        });
})

我想知道，有没有更简单的方法来创建一个全局函数preloaderShow（）和preloaderHide（）？似乎很多代码必须在每个控制器中包含以下内容，如果我想稍后修改微调器，我必须更新每行代码？

    .controller('InformationCtrl', function ($scope, $http, $ionicLoading) {
    $scope.show = function () {
        $ionicLoading.show({
            template: '<p>Loading...</p><ion-spinner></ion-spinner>'
        });
    };
    $scope.hide = function () {
        $ionicLoading.hide();
    };

我刚刚使用了入门应用程序，所以也许我错过了一些东西，我看到使用服务的东西，任何快速的例子或建议将不胜感激。

Answer 1

您可以轻松地将其抽象为服务

angular.module('app').factory('loader', function loaderFactory ($ionicLoading) {
  return {
    show: function () {
      $ionicLoading.show({
        template: '<p>Loading...</p><ion-spinner></ion-spinner>'
      });
    },
    hide: function () {
      $ionicLoading.hide();
    };
  }  
});

然后在你的控制器

angular.module('app').controller('InformationCtrl', function ($scope, $http, loader) {
  loader.show();
  $http.get($scope.base_url + "information")
  .then(function (response) {
    $scope.information = response.data;
  }, function errorCallback(response) {
    alert("error loading content");
  })
  .finally(function () {
    loader.hide();
  });
}

Ionic / Angular.js Global Preloader

1 个答案: