使用sachinchoolur's angularjs-flash模块我想在我的应用程序中添加flash消息。
Flash消息正在使用我的设置,但它们不会消失。
在文档中,它说要在应用的配置中添加超时和 FlashProvider 。
我正在尝试这样做,但每当我注入 FlashProvider 时,我的AngularJs逻辑就会停止工作(所有逻辑)。
来自第三方模块的FlashProvider: angular-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);
答案 0 :(得分:1)
咄!注射不合适!你错过了$httpProvider
。它实际上意味着FlashProvider
被注入$httpProvider
:)
您的配置应该是这样的。 如果其他所有内容都已到位,这应该可以使其正常工作
.config(['$locationProvider', '$routeProvider', '$httpProvider', 'FlashProvider'
//---------------------------------------------^^^
function($locationProvider, $routeProvider, $httpProvider, FlashProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/home'});
}]);