依赖于$ ionicPopup的共享函数？

我想创建一个离子消息框的自定义版本。该功能使用$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. 
       ...... 
      } 
     }; 
    }) 
});

来源

2016-07-01 ca9163d9

听起来像是最好的做法是使用service。但是，为了在app.config()阶段依赖in-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'); 
});

来源

2016-07-01 08:05:47

我在手机上试了一下。但是，它会在每个webapi调用上弹出消息，并且没有收到任何数据？ – ca9163d9

谢谢。但是，它仍然会在开始时弹出一次？ – ca9163d9

我删除它。该消息仍然显示。状态码为0. – ca9163d9

-1

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

来源

2016-07-01 08:09:07 Prianca

它不能在'app.config（）'阶段注入，很确定OP需要显示一个关于ajax失败以及一般失败的交互消息，并且想要重新使用那个'showMessage'函数 –

谢谢Jossef纠正我但指令可能是更好的解决方案。 – Prianca

我认为在$ionicPopup周围写一个包装是个好主意。这样，提供默认值应该很容易，甚至可以替换这些默认值。其他优点表明，如果您需要它，将$ionicPopup与另一个弹出式实现进行交换非常简单。

编写这种包装的最佳方法是创建一个角度为service。您可以看到我使用_.defaultsDeep。这很有用，因为您可以使用您自己的选项提供showPopup，如果没有给出选项，则默认为其他内容。

你会到处打电话弹出你需要做：

myPopup.showPopup();

随着可能性添加你自己的选择，所以如果你想覆盖字幕，你会做以下几点：

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

myPopup.showPopup(options);

来源

2016-07-01 08:14:37

我看到Jossef Harush对你想在配置阶段显示弹出窗口的一个有效评论。我认为最好是，如果你可以在我的解决方案（尤其是默认的深度）和他的提供者方法之间进行混合。 –

依赖于$ ionicPopup的共享函数？

回答

相关问题