在 AngularJs 中将提供程序添加到配置无效

Question

我想使用 sachinchoolur's angularjs-flash 模块向我的应用程序添加即显消息。

即显消息在我的设置中有效，但它们并没有消失。

文档中说要在应用程序配置中添加 Time Out 和 FlashProvider。

我正在尝试这样做，但每当我注入 FlashProvider 时，我的 AngularJs 逻辑就会停止工作（所有逻辑）。

来自第 3 方模块的 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">&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'});
}]);

Javascript html 文件中的引用

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

在 AngularJs 中将提供程序添加到配置无效

Adding provider to config in AngularJs not working

angularjs

flash

dependency-injection

flash-message