AngularJS Error: [$injector:unpr] Unknown provider:

Question

我尝试通过单击图像从我的应用程序启动 angular bootstrap 模式 window 时收到未知提供程序错误。我在应用程序的其他地方成功启动了相同类型的模式。

Here is a screenshot of the error in the debugger

我下面的控制器代码有问题吗？我查看了堆栈上的其他几个未知提供程序错误帖子，据我所知，我做的事情是正确的。

app.controller('ModalInstanceCtrl', function($scope, $modalInstance, items,
 removeVideoFromCart, removeLiteratureFromCart, productHasItems, cartItemHasVideos,
 cartItemHasLiterature, getCartMailToBody, cartMailtoLink, logSentItems) {

    $scope.items = items;

    $scope.ok = function() {
        $modalInstance.close($scope.test);
    };

    $scope.removeVideoFromCart = function (video, familyIndex, index) {
        removeVideoFromCart(video, familyIndex, index);
        $scope.cartMailtoLink = getCartMailToBody(); //update the mailto link body to remove video links
    }

    $scope.removeLiteratureFromCart = function (literature, familyIndex, index) {
        removeLiteratureFromCart(literature, familyIndex, index); 
        $scope.cartMailtoLink = getCartMailToBody(); //update the mailto link body to remove lit links
    }       

    $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
    };

    $scope.productHasItems = function(index) {
        return productHasItems(index);
    }

    $scope.cartItemHasVideos = function(index) {
        return cartItemHasVideos(index);
    }

    $scope.cartItemHasLiterature = function (index) {
        return cartItemHasLiterature(index);
    }

    $scope.getCartMailToBody = function () {
        getCartMailToBody();
    }
    $scope.cartMailtoLink = getCartMailToBody();

    $scope.logSentItems = function () {
        logSentItems();
    }

});

非常感谢您抽出宝贵时间。如果您需要更多信息或者我不清楚，请告诉我。

Answer 1

@Claies @ritesh 当我偶然发现我的解决方案时，我正在输入一个很长的编辑来回答问题。我有多个使用 ModalInstanceController 打开模态 windows 的函数。比如这里有两个：

$scope.open = function(size) {
                var modalInstance = $modal.open({
                    templateUrl: 'myModalContent.html',
                    controller: 'ModalInstanceCtrl',
                    size: size,
                    resolve: {
                        items: function() {
                            return $scope.selectedVideo3;
                        }
                    }
                });

                modalInstance.result.then(function(selectedItem) {
                    $scope.selected = selectedItem;
                }, function() {
                    $log.info('Modal dismissed at: ' + new Date());
                });
        };

        $scope.openCart = function(size) {

            var modalInstance = $modal.open({
                templateUrl: 'myAttachmentModalContent.html',
                controller: 'ModalInstanceCtrl',
                size: size,
                resolve: {
                    items: function() {
                        return "";
                   },
                    removeVideoFromCart: function() {
                            return $scope.removeVideoFromCart;
                    },
                    removeLiteratureFromCart: function() {
                            return $scope.removeLiteratureFromCart;
                    },
                    productHasItems: function() {
                            return $scope.productHasItems;
                    },
                    cartItemHasVideos: function() {
                        return $scope.cartItemHasVideos;
                    },
                    cartItemHasLiterature: function() {
                        return $scope.cartItemHasLiterature;
                    },
                    getCartMailToBody: function() {
                        return $scope.getCartMailToBody
                    },
                    cartMailtoLink: function() {
                        return $scope.cartMailtoLink
                    },
                    logSentItems: function () {
                        return $scope.logSentItems;
                    }
                }
            });

            modalInstance.result.then(function(selectedItem) {
                $scope.selected = selectedItem;
            }, function() {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };

我只在 openCart 函数中使用了 ModalInstanceController 的大部分依赖项，所以我没有将所有依赖项函数声明添加到我的其他打开方法中（您可以在 $[=19= 的解析中看到] 上面的方法我只声明了项目而没有函数）。

我需要像在 $scope.openCart 中那样声明所有这些函数，它解决了我的问题。

感谢您与我们联系。

Answer 2

我假设 app 指向在您的应用程序的根目录下定义的该模块的声明，例如在 app.js:

app = angular.module('app', []);

并且您在 index.html 中包含了每个依赖项，例如在任何 angular 脚本和 app.js

之后

<script src="yourDependency.js"></script>

就控制器代码本身而言，您不需要为 $scope 分配一个属性包含调用 removeVideoFromCart 服务的函数的 'ModalInstanceCtrl' =] 控制器，因为那样你仍然需要再次调用该包装函数（目前看起来你没有这样做）。

您可以只在控制器中调用该方法，而不是将其包装在一个函数中，例如

$scope.removeVideoFromCart = removeVideoFromCart(video, familyIndex, index);

或者直接调用服务，例如如果您不需要将数据绑定到 UI，就像发送表单数据一样，成功后只是重定向到其他地方（尽管在您的情况下，您似乎确实想将数据绑定到 UI） :

removeVideoFromCart(video, familyIndex, index);

从您的代码中不清楚每个服务的参数来自何处。它们在 items 对象中吗？例如

var video, familyIndex, index
vm.items = items; 
   video = items.video;
   familyIndex = items.familyIndex;
   index = items.index;

就风格而言，我更喜欢不将模块实例分配给变量，而是使用 setter 语法（遵循 [John Papa's] (https://github.com/johnpapa/angular-styleguide#modules) styleguide, but also included in Todd Motto's)，如下所示：

angular
    .module('app')
    .controller('ModalInstanceCtrl', ModalInstanceCtrl);

ModalInstanceCtrl.$inject['your', 'dependencies', 'go', 'here']

function ModalInstanceCtrl(/*dependencies here as parameters e.g.*/, removeVideoFromCart) {

    var vm = this; // use in place of $scope and clarifies the context of the this keyword
    vm.items = items; 
    video = items.video;
    familyIndex = items.familyIndex;
    index = items.index;

    $scope.removeVideoFromCart = removeVideoFromCart(video, familyIndex, index);
    $scope.removeLiteratureFromCart = removeLiteratureFromCart(literature, familyIndex, index);
    //etc

});

注意：我更喜欢所有这些方法的外观，例如clearCartAndCloseModal('other', 'services') 向控制器隐藏所有实现细节。这也使得为每个视图创建一个控制器变得更容易，这反过来又更容易测试，因为您已将所有逻辑推送到服务中。但是我从你的代码中不清楚每个服务之间是否有任何关系。

Answer 3

我的情况是注入的服务名称中的大写小写问题。

AngularJS Error: [$injector:unpr] Unknown provider:

AngularJS Error: [$injector:unpr] Unknown provider:

angularjs

angular-bootstrap