Ajout du fournisseur à la configuration dans AngularJs ne fonctionne pas

Question

Avec l'utilisation du module sachinchoolur's angularjs-flash je veux ajouter des messages flash à mon application.

Les messages flash fonctionnent avec ma configuration, mais ils ne disparaissent pas.

Dans la documentation, il est dit d'ajouter un temps Out avec un FlashProvider dans la configuration de l'application.

J'essaye de faire ceci mais chaque fois que j'injecte le FlashProvider, ma logique d'AngularJs cesse de fonctionner (toute la logique).

FlashProvider du module 3ème partie: angulaire flash.min.js

app.provider('Flash', function() { 
    var defaultConfig = {}; 
    var templatePresets = { 
     bootstrap: { 
      html: '\n    <div role="alert" id="{{flash.config.id}}"\n     class="alert {{flash.config.class}} alert-{{flash.type}} alert-dismissible alertIn alertOut">\n     <div type="button" class="close" ng-show="flash.showClose" close-flash="{{flash.id}}">\n      <span aria-hidden="true">&times;</span>\n      <span class="sr-only">Close</span>\n     </div>\n     <span dynamic="flash.text"></span>\n    </div>', 
      transclude: false 
     }, 
     transclude: { 
      html: '<div applytransclude></div>', 
      transclude: true 
     } 
    }; 

    this.setTimeout = function (timeout) { 
     if (typeof timeout !== 'number') return; 
     defaultConfig.timeout = timeout; 
    }; 
    this.setShowClose = function (value) { 
     if (typeof value !== 'boolean') return; 
     defaultConfig.showClose = value; 
    }; 
    this.setTemplate = function (template) { 
     if (typeof template !== 'string') return; 
     defaultConfig.template = template; 
    }; 
    this.setTemplatePreset = function (preset) { 
     if (typeof preset !== 'string' || !(preset in templatePresets)) return; 

     var template = templatePresets[preset]; 
     this.setTemplate(template.html); 
     defaultConfig.templateTransclude = template.transclude; 
    }; 
    this.setOnDismiss = function (callback) { 
     if (typeof callback !== 'function') return; 
     defaultConfig.onDismiss = callback; 
    }; 

    this.setTimeout(5000); 
    this.setShowClose(true); 
    this.setTemplatePreset('bootstrap'); 

    this.$get = ['$rootScope', '$timeout', function ($rootScope, $timeout) { 
     var dataFactory = {}; 
     var counter = 0; 

     dataFactory.setTimeout = this.setTimeout; 
     dataFactory.setShowClose = this.setShowClose; 
     dataFactory.setOnDismiss = this.setOnDismiss; 
     dataFactory.config = defaultConfig; 

     dataFactory.create = function (type, text, timeout, config, showClose) { 
      if (!text) return false; 
      var $this = void 0, 
       flash = void 0; 
      $this = this; 
      flash = { 
       type: type, 
       text: text, 
       config: config, 
       id: counter++ 
      }; 
      flash.showClose = typeof showClose !== 'undefined' ? showClose : defaultConfig.showClose; 
      if (defaultConfig.timeout && typeof timeout === 'undefined') { 
       flash.timeout = defaultConfig.timeout; 
      } else if (timeout) { 
       flash.timeout = timeout; 
      } 
      $rootScope.flashes.push(flash); 
      if (flash.timeout) { 
       flash.timeoutObj = $timeout(function() { 
        $this.dismiss(flash.id); 
       }, flash.timeout); 
      } 
      return flash.id; 
     }; 
     dataFactory.pause = function (index) { 
      if ($rootScope.flashes[index].timeoutObj) { 
       $timeout.cancel($rootScope.flashes[index].timeoutObj); 
      } 
     }; 
     dataFactory.dismiss = function (id) { 
      var index = findIndexById(id); 
      if (index !== -1) { 
       var flash = $rootScope.flashes[index]; 
       dataFactory.pause(index); 
       $rootScope.flashes.splice(index, 1); 
       if (typeof defaultConfig.onDismiss === 'function') { 
        defaultConfig.onDismiss(flash); 
       } 
      } 
     }; 
     dataFactory.clear = function() { 
      while ($rootScope.flashes.length > 0) { 
       dataFactory.dismiss($rootScope.flashes[0].id); 
      } 
     }; 
     dataFactory.reset = dataFactory.clear; 
     function findIndexById(id) { 
      return $rootScope.flashes.map(function (flash) { 
       return flash.id; 
      }).indexOf(id); 
     } 

     return dataFactory; 
    }]; 
}); 

Ma principale configuration du module

// public/js/app.js 
angular.module('myApp', [ 
    'ngRoute', 
    'ngFlash', 
    'myApp.home', 
    'myApp.profile', 
    'myApp.login', 
    'myApp.signup' 

]) 
.config(['$locationProvider', '$routeProvider', 'FlashProvider' 
    function($locationProvider, $routeProvider, $httpProvider, FlashProvider) { 



    $locationProvider.hashPrefix('!'); 



    $routeProvider.otherwise({redirectTo: '/home'}); 
}]); 

référence Javascript dans le fichier html

<script src="bower_components/angular-flash-alert/dist/angular-flash.min.js"></script> 

EDIT

Selon la documentation Disparaître automatiquement clignote après un certain laps de temps, je l'ai fait, mais ils ne disparaissent pas encore.

fichier html

<flash-message duration="5000"></flash-message> 

fichier de configuration

.config(['$locationProvider', '$routeProvider', '$httpProvider', 'FlashProvider', 
     function($locationProvider, $routeProvider, $httpProvider, FlashProvider) { 

     FlashProvider.setTimeout(5000); 

Answer 1

Duh! Les injections ne sont pas en ordre! Vous avez manqué $httpProvider. Cela signifie que FlashProvider a été injecté comme $httpProvider :)

Votre config devrait ressembler à ceci. Et si tout le reste est en place, cela devrait le faire fonctionner

.config(['$locationProvider', '$routeProvider', '$httpProvider', 'FlashProvider' 
    //---------------------------------------------^^^ 
    function($locationProvider, $routeProvider, $httpProvider, FlashProvider) { 
    $locationProvider.hashPrefix('!'); 
    $routeProvider.otherwise({redirectTo: '/home'}); 
}]);