向控制器添加服務時的未知提供者

Question

我創建了一個Modal服務，當我將該服務注入到控制器中時，我收到一條錯誤消息：“ $ Injector：unpr Unknown Provider”。 這是下面的代碼。 讓我知道我是否想念一些東西。

這是我到目前為止提供的服務。

'use strict';

angular.module('myApp.services', [])

.factory('modalService', ['$scope', function($scope) {
return {
    openMenuModal: function(templateLink, windowAnimation) {
        var modalInstance = $modal.open({
            templateUrl: templateLink,
            backdrop: 'static',
            windowClass: windowAnimation,
            controller: function($scope, $modalInstance) {
                $scope.close = function() {
                    $modalInstance.close();
                };
            },
            size: 'md',
            scope: $scope,
            keyboard: true
        });

    }
};

}]);

這是我設置的控制器。

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

這是模態中的數據模板-Books.html

<div ng-controller="HomeCtrl">
<div class="modalBox animated fadeIn">
<button class="btn btn-danger pull-right" type="button" ng-click="" tooltip="Close"><i class="fa fa-times"></i></button>
<h1>title</h1>
<p>description</p>
<div class="next">
<button class="btn btn-danger pull-right" type="button" tooltip="Close"><i class="fa fa-times"></i></button>
            </div>
        </div>
    </div>

這是我調用openBook（）以使用json中的信息打開模態的主頁

    <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>

圖書示例的json-在另一個名為Things的數組中

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

Answer 1

此錯誤是由於$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
}]);

因此，請回答您的問題，在您看來，您似乎缺少依賴性

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

像這樣注入modalService ：

.controller('HomeCtrl', ['modalService', function($scope, $http, $modal, 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，可通過調用工廠來打開模式。

http://plnkr.co/edit/G68NVYZlTqrIS0N2TKL4