依賴於$ 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的共享函數？

回答

相關問題