此问题的更新：

Question

我遇到了将角度烤面包机服务注入工厂对象的问题，当我注意没有错误地注入烤面包机时，烤面包机上的ngAnimate注入失败。据我所知，我已经正确地完成了，所以我不确定我在这里错过了什么。

错误讯息：

Uncaught Error: [$injector:modulerr] Failed to instantiate module apptSetting due to:
Error: [$injector:modulerr] Failed to instantiate module toaster due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injec...<omitted>...1)

主要应用文件：

//创建初始角度应用程序模块

var app = angular.module("testApp", ['angularSpinner', 'ngResource', 'ui.bootstrap', 'toaster', 'app.controllers', 'app.factories']);
angular.module("app.factories", []);
angular.module("app.controllers", []);

工厂档案：

angular.module('app.factories').factory('dataFactory', ['$rootScope', '$resource', '$http', 'toaster', function ($rootScope, $resource, $http, toaster) {
return {
    UpdateOrderStatus: function(orderId) {
        return $http({
            url: "/path/UpdateOrderStatus",
            dataType: "json",
            method: "POST",
            data: { orderId: orderId },
            headers: {
                "Content-Type": "application/json; charset=utf-8"
            }
        }).success(function(order) {
            toaster.pop('success', "Order status Update", "Order status successfully updated.");
        }).error(function() {
            //toaster.error("Order status update failed.");
        });
    }

部分烤面包机文件：

angular.module('toaster', ['ngAnimate'])
.service('toaster', ['$rootScope', function ($rootScope) {
this.pop = function (type, title, body, timeout, bodyOutputType) {
    this.toast = {
        type: type,
        title: title,
        body: body,
        timeout: timeout,
        bodyOutputType: bodyOutputType
    };
    $rootScope.$broadcast('toaster-newToast');
};

脚本按顺序列出：

                    "~/Scripts/angular.js",
                    "~/Scripts/angular-resource.js", 
                    "~/Scripts/ui-bootstrap-tpls-0.10.0.js",
                    "~/Scripts/spin.js",
                    "~/Scritps/angular-animate.min.js",
                    "~/Scripts/toaster.js",
                    "~/Scripts/ApptSettingApp.js",
                    "~/Scripts/angular-spinner.js",
                    "~/Scripts/dataFactory.js",

此问题的更新：

我发现这个问题，我在.net应用程序中使用angular，我的脚本都是在我的应用程序中使用bundler呈现的。即使脚本文件引用相同，并且烤面包机参考是正确的。如果您向页面添加标记，来源于相同的脚本文件，它将正常工作。然而，这并没有解决问题，它确实可以更深入地了解原因。

Answer 1

好吧，

问题背后的原因很简单，我正在多次加载一个同名的服务...但是，如果您不知道角度处理如何注入具有相同名称的对象，则产生的行为很常见。在我的情况下，我在我的主应用程序中加载了烤箱模块，在那里我创建了应用程序所需的所有模块。然后我将指令添加到html页面，以便烤面包机可以显示消息，这导致再次加载烤面包机服务，但没有提供者（我假设它已经在主应用程序中加载），因此提供程序错误。

最初要修复它，我在页面上添加了一个脚本标记，一切正常，但由于我希望这是一个全局消息传递方案，不得不为每个页面添加一个脚本标记困扰我，所以我一直在挖掘

那时我注意到指令再次加载服务。所以它是在主模块中加载，然后指令加载它，最后在页面上脚本标记覆盖了前两个实现。所以正确修复是不是在主应用程序中加载它从html页面中删除脚本标记并简单地将指令添加到页面。

此行为是角度处理注入具有相同名称的对象的方式的结果，最终最后一个对象获胜。

我希望这有助于下一个遇到类似事情的人。

Answer 2

将toaster模块添加到app.factories依赖项，因为toaster和dataFactory位于不同的模块中。

angular.module("app.factories", ['toaster']);

获取嵌套的角度模块以正确注入

此问题的更新：

2 个答案: