Javascript 向控制器添加服务时提供程序未知

我创建了一个模式服务，当我将该服务注入控制器时，我收到一个错误，上面写着$Injector:unpr Unknown Provider。下面是我的代码。如果我遗漏了什么，请告诉我

这是我目前为止的服务

这是我设置的控制器

下面是modal-Books.html中数据的模板

---

此错误是由于$injector无法解析所需的依赖项造成的。要解决此问题，请确保已正确定义和拼写依赖项。例如，如果未定义myService，以下代码将失败，并出现与您收到的错误相同的错误-$injector:unpr：

angular.module('myApp', [])
.controller('MyController', ['myService', function (myService) {
  // Do something with myService
}]);

确保定义了每个依赖项将解决问题，如下所述

angular.module('myApp', [])
.service('myService', function () { /* ... */ })
.controller('MyController', ['myService', function (myService) {
  // Do something with myService
}]);

因此，为了回答您的问题，在您的情况下，您似乎缺少依赖性

要像这样注入modalService：

您还需要将factory模块更改为angular.module'myApp.services'，['ui.bootstrap']，并使用$uibModal，因为$modal已不推荐使用

angular.module('myApp', ['ui.bootstrap'])

.factory('modalService', ['$uibModal', function($uibModal) {

  return {
    openMenuModal: function(templateLink, windowAnimation) {

        var modalObj = $uibModal.open({
            templateUrl: templateLink,
            backdrop: 'static',
            windowClass: windowAnimation,
            controller: function($scope,$modalInstance){
              $scope.ok = function(id){
                //Process OK Button Click
                 $modalInstance.close(); 
              },
               $scope.cancel = function(){
                $modalInstance.dismiss('cancel');
              }
            },
            size: 'md',
            keyboard: true,
            resolve: {
              someData: function () {
                return 'Return some Data';
              }
          }
        });
    }
};
}])

.controller('HomeCtrl', ['$scope','modalService', function($scope, modalService, someData) {
   $scope.dataFromService = someData;
   $scope.opentheBook = function(){
      modalService.openMenuModal('myModalContent.html', 'animated zoomIn');
    };
}]);

更新1

如评论中所述，不要尝试向工厂注入$scope。这是我创建的一个Plunker，它允许您通过调用工厂打开一个模式

---

请提供，否则工厂将无法获得$scope注入。我确实这样做了，但它仍然会抛出一个错误。我不知道它可能是什么。@LadyT尝试我更新的答案，对factory进行更改以同时注入-$modalInstance。@LadyT确定，将模块依赖项注入更改为在myapp.Services中注入。同样，angular.module'myApp.services'，['ui.bootstrap']是您的工厂所在地。检查我的更新。@LadyT你在index.html中下载并添加了ui-bootstrap.js的路径了吗？@LadyT-Hmm。帮我一个忙，如果可以的话，加入html，这样我们可以更全面地了解正在发生的事情。

    <div class="Books">
                  <ul>
                    <li ng-repeat="book in thing.Books" class="list-unstyled"><a ng-click="opentheBook" href="#"><h6>{{book.name}}</h6></a></li>
                   </ul>
            </div>

"Books": [
            {
                "name": "Name of Book 1",
                "description": "Description about book..."
            },
            {
                "name": "Name of Book 2",
                "description": "Description about book..."
            }
        ]

angular.module('myApp', [])
.controller('MyController', ['myService', function (myService) {
  // Do something with myService
}]);

angular.module('myApp', [])
.service('myService', function () { /* ... */ })
.controller('MyController', ['myService', function (myService) {
  // Do something with myService
}]);

angular.module('myApp.controllers', ['ui.bootstrap', 'ngAnimate'])
.controller('HomeCtrl', function($scope, $http, $modal, modalService) {
    $scope.opentheBook = modalService.openMenuModal('partials/Books.html', 'animated zoomIn');
});

.controller('HomeCtrl', ['modalService', function($scope, $http, $modal, modalService) {

    }]);

angular.module('myApp', ['ui.bootstrap'])

.factory('modalService', ['$uibModal', function($uibModal) {

  return {
    openMenuModal: function(templateLink, windowAnimation) {

        var modalObj = $uibModal.open({
            templateUrl: templateLink,
            backdrop: 'static',
            windowClass: windowAnimation,
            controller: function($scope,$modalInstance){
              $scope.ok = function(id){
                //Process OK Button Click
                 $modalInstance.close(); 
              },
               $scope.cancel = function(){
                $modalInstance.dismiss('cancel');
              }
            },
            size: 'md',
            keyboard: true,
            resolve: {
              someData: function () {
                return 'Return some Data';
              }
          }
        });
    }
};
}])

.controller('HomeCtrl', ['$scope','modalService', function($scope, modalService, someData) {
   $scope.dataFromService = someData;
   $scope.opentheBook = function(){
      modalService.openMenuModal('myModalContent.html', 'animated zoomIn');
    };
}]);