在AngularJs中添加提供程序以配置不起作用
问题描述:
使用sachinchoolur's angularjs-flash模块我想将Flash消息添加到我的应用程序。在AngularJs中添加提供程序以配置不起作用
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">×</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);
答
咄!注射不合适!您错过了$httpProvider
。它实际上意味着FlashProvider
被注入为$httpProvider
:)
您的配置应该是这样的。而如果一切就绪,这应该使其工作
.config(['$locationProvider', '$routeProvider', '$httpProvider', 'FlashProvider'
//---------------------------------------------^^^
function($locationProvider, $routeProvider, $httpProvider, FlashProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/home'});
}]);
由于它的作品!但是我添加了一个TimeOut,就像文档说的那样,但是这些消息仍然没有消失。你也许知道为什么? – Soundwave
@Soundwave从来没有真正使用它,但你也许可以提供一个示例代码,或者就此提出一个单独的问题,即使我不能,别人也会帮助你......另外,如果它有帮助,请提高回答! – tanmay
感谢您查看:)我现在直接从Github存储库下载它,但不幸的是它仍然无法正常工作。 – Soundwave