向控制器添加服务时未知提供者

Posted

技术标签:

【中文标题】向控制器添加服务时未知提供者【英文标题】:Unknown Provider when adding service to controller 【发布时间】:2016-01-12 20:31:22 【问题描述】:

我创建了一个模态服务,当我将服务注入控制器时,我收到一条错误消息,显示“$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..."
            
        ]

【问题讨论】:

请提供fiddle或Plunker 工厂没有得到$scope 注射。 【参考方案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

如 cmets 中所述,请勿尝试将 $scope 注入您的工厂。这是我创建的一个 Plunker,它可以让你通过调用工厂来打开一个模式。

http://plnkr.co/edit/G68NVYZlTqrIS0N2TKL4

【讨论】:

我确实这样做了,但它仍然会引发错误。我不知道它可能是什么。 @LadyT 尝试我更新的答案,对工厂进行更改以也注入 - $modalInstance @LadyT 好的,将模块依赖注入更改为注入myapp.Services。所以,angular.module('myApp.services', ['ui.bootstrap'])factory 在哪里。检查我的更新。 @LadyT 您是否已下载并在 index.html 中添加了 ui-bootstrap.js 的路径? @LadyT 嗯。帮我一个忙,如果可以的话,包括 html,这样我们就可以看到正在发生的事情的更大图景。

以上是关于向控制器添加服务时未知提供者的主要内容,如果未能解决你的问题,请参考以下文章

错误:未知提供者:aProvider <- a

未知提供者:$rootElementProvider 使用 $injector 在 angular.bootstrap 之前获取 $location 服务时

rsub connect_to localhost:未知主机(提供节点名或服务名,或未知)

Maven:解析工件时出错 - 提供节点名或服务名,或未知

错误:[$injector:unpr] 未知提供者:在 AngularJS 服务测试中

AngularJS 错误:$injector:unpr 未知提供者