Question

尝试通过单击图像从我的应用程序启动角度引导模式窗口时，我收到了一个未知的提供程序错误。我在应用程序的其他地方成功启动了相同类型的模式。

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

我将假设app指向在您的应用根目录中定义的该模块的声明，例如在app.js：

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

并且您在index.html范围内包含了每个依赖项，例如在任何角度脚本和app.js

之后

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

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

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

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

或只是致电服务，例如如果您不需要将数据绑定到UI，就像发送表单数据那样成功只是重定向到其他地方（尽管在您的情况下看起来您确实希望将数据绑定到UI）：

removeVideoFromCart(video, familyIndex, index);

从您的代码中不清楚每个服务的参数源自何处。它们是否在items对象中？ e.g。

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

就样式而言，我不希望将模块实例分配给变量，而是使用setter语法（遵循[John Papa＆＃39; s]（https://github.com/johnpapa/angular-styleguide#modules）样式指南，但也包含在{{3像这样：

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 2

@Claies @ritesh当我遇到解决方案时，我正在输入一个长编辑，并回答问题。我有多个函数使用ModalInstanceController打开模态窗口。例如，这里有两个：

$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的大多数依赖项，所以我没有将所有依赖函数声明添加到我的其他open方法中（你可以在上面的$ scope.open方法的解析中看到）只声明项目而没有功能）。

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

感谢您与我们联系。

Answer 3

我的案例是注入的服务名称中的UpperCase LowerCase问题。

AngularJS错误：[$ injector：unpr]未知提供者：

3 个答案: