在AngularJs中添加提供程序以配置不起作用

Question

使用sachinchoolur's angularjs-flash模塊我想將Flash消息添加到我的應用程序。

Flash消息正在使用我的設置，但它們不會消失。

在本文檔中，它說添加超時與應用中的配置的FlashProvider。

我想這樣做，但每當我注入FlashProvider，我的AngularJs邏輯停止工作（所有邏輯）。

FlashProvider從第三方模塊：角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; 
    }]; 
}); 

我主要的模塊配置

// 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'}); 
}]); 

在HTML文件中

javascript參考

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

編輯

根據該文件自動消失閃爍一定量的時候，我這樣做之後，但他們仍然沒有消失。

HTML文件

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

配置文件

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

     FlashProvider.setTimeout(5000); 

Answer 1

咄！注射不合適！您錯過了$httpProvider。它實際上意味着FlashProvider被注入爲$httpProvider :)

您的配置應該是這樣的。而如果一切就緒，這應該使其工作

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