Ошибка AngularJS: [$ injector: unpr] Неизвестный поставщик:

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

@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()); 
      }); 
     }; 

Я использую только большинство зависимостей для ModalInstanceController в функции OpenCart, так что я не добавлял все объявления функций зависимостей для других моих открытых методов (Вы можете увидеть в решение для метода $ scope.open выше, я объявляю только объекты и никаких функций).

Мне нужно было объявить все эти функции, как я сделал в $ scope.openCart, и это исправило мою проблему.

Благодарим за обращение.

Answer 2

Я предполагаю, что 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); 

или просто позвоните по службе, например. если вам не нужно привязать данные к пользовательскому интерфейсу, как отправка данных формы, что успех просто перенаправляет в другом месте (хотя в вашем случае это выглядит, как вы хотите, чтобы связать данные пользовательского интерфейса):

removeVideoFromCart(video, familyIndex, index); 

Из вашего кода не ясно, откуда берутся параметры для каждой службы. Являются ли они в объекте items? например

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

С точки зрения стиля, я предпочитаю не назначая экземпляров модуля переменной и вместо того, чтобы использовать сеттер синтаксис (следуя [John папин] (https://github.com/johnpapa/angular-styleguide#modules) стилистический справочник, но и включены в 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 

}); 

NB: Я бы предпочел фасад во всех этих методах, например clearCartAndCloseModal('other', 'services'), чтобы скрыть все детали реализации от контроллера. Это также упрощает создание одного контроллера для каждого представления, что, в свою очередь, упрощает тестирование, вы включили всю логику в сервисы. Но из вашего кода я не понимаю, существует ли какая-либо взаимосвязь между каждой из служб.