Question

我想在离子中创建自定义版本的消息框。该函数使用$ionicPopup。

$myShowPopup = function() {
 $scope.data = {};
 $ionicPopup.show({
   subTitle: 'There is no network connection right now.',
   scope: $scope,
   buttons: [
     { text: 'Got it' 
     type: 'button clear'},
   ]});
}

我需要在多个地方调用该函数，例如，在下面的app.js代码中。它应该在哪里定义？

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])
.run(function ($ionicPlatform, $ionicPopup) {
    $ionicPlatform.ready(function () {
        ......
        // Need to call it here
        ......
})
.config(function ($resourceProvider) {
    angular.forEach($resourceProvider.defaults.actions, function (action) {
        action['interceptor'] = {
            responseError: function (httpResponse) {
                ......
                // And here.
                ......
            }
        };
    })
});

Answer 1

听起来像使用service的最佳做法。但是，为了依赖于app.config()阶段，service被定义为provider，需要做很多工作。

在线演示 - https://plnkr.co/edit/jdDPepAbn9UXkdVsDR5L?p=preview

var app = angular.module('plunker', ['ionic']);

app.controller('MainCtrl', function($scope, $http) {

  $scope.test = function(){
    $http.get('http://asdasd.does-not-exist');  
  }

});


app.run(function($ionicPlatform, interactiveService) {
  $ionicPlatform.ready(function() {
    interactiveService.showPopup('Welcome!');
  });
});


app.provider('interactiveService', function() {
  this.$get = ['$ionicPopup', function($ionicPopup) {

    return {
      showPopup: showPopup
    };

    function showPopup(message) {

      $ionicPopup.show({
        subTitle: message,
        buttons: [{
          text: 'Got it',
          type: 'button clear'
        }, ]
      });
    }
  }];
});


app.config(function($provide, $httpProvider) {
  $provide.factory('httpInterceptor', function($q, $injector) {
    return {
      response: function(response) {
        return response || $q.when(response);
      },
      responseError: function(rejection) {

        var interactiveService = $injector.get('interactiveService');

        if (rejection.status === 0 || rejection.status === -1) {
          interactiveService.showPopup('There is no network connection right now.');
        }

        return $q.reject(rejection);
      }
    };
  });

  $httpProvider.interceptors.push('httpInterceptor');
});

Answer 2

我认为在$ionicPopup周围编写一个包装器是个好主意。这样，提供默认值应该非常容易，甚至可以替换这些默认值。另外一个优点在于，如果您需要，可以很容易地将$ionicPopup与另一个弹出式实现交换。

编写这样的包装器的最佳方法是创建一个角度service。

angular.module('myPopup', ['ionic', '_'])
.service(function ($ionicPopup) {
    var service = {
        showPopup: showPopup
    }
    return service;

    function showPopup(options) {
        var settings = _.defaultsDeep(options, {
            subTitle: 'There is no network connection right now.',
            buttons: [
                { 
                    text: 'Got it' 
                    type: 'button clear'
                },
            ]
        });

        $ionicPopup.show(settings);
    }
})

正如您所见，我正在使用_.defaultsDeep。这很有用，因为您可以为showPopup提供自己的选项，如果没有给出选项，则默认为其他选项。

您可以通过执行以下操作，随时随地调出弹出窗口：

myPopup.showPopup();

可以添加自己的选项，因此如果要覆盖subTitle，则可以执行以下操作：

var options = {
    subTitle: 'my custom subtitle'
};

myPopup.showPopup(options);

Answer 3

为此功能创建工厂，无论您需要此功能，只需注入并调用该功能。另一个更好的解决方案是为弹出窗口创建一个指令。您可以轻松地重复使用它。

共享函数取决于$ ionicPopup？

3 个答案: