向控制器添加服务时未知提供者
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,这样我们就可以看到正在发生的事情的更大图景。以上是关于向控制器添加服务时未知提供者的主要内容,如果未能解决你的问题,请参考以下文章
未知提供者:$rootElementProvider 使用 $injector 在 angular.bootstrap 之前获取 $location 服务时
rsub connect_to localhost:未知主机(提供节点名或服务名,或未知)