我在尝试实现Bootstrap Modal窗口时一直收到此错误。可能是什么原因造成的?我已经从http://angular-ui.github.io/bootstrap/#/modal复制/粘贴了所有内容。
我在尝试实现Bootstrap Modal窗口时一直收到此错误。可能是什么原因造成的?我已经从http://angular-ui.github.io/bootstrap/#/modal复制/粘贴了所有内容。
Answers:
当您为控制器,服务等编写依赖项时,没有创建或包含该依赖项,就会发生这种错误。
在这种情况下,$modal
不是已知的服务。听起来您在引导角度时没有将ui-bootstrap作为依赖项传递。angular.module('myModule', ['ui.bootstrap']);
另外,为安全起见,请确保您使用的是最新版本的ui-bootstrap(0.6.0)。
该错误在版本0.5.0中引发,但更新到0.6.0确实使$ modal服务可用。因此,更新至版本0.6.0,并确保在注册模块时需要ui.boostrap。
回复您的评论:这就是注入模块依赖项的方式。
<!-- tell Angular what module we are bootstrapping -->
<html ng-app="myApp" ng-controller="myCtrl">
js:
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
});
该$modal
服务已重命名为$uibModal
。
使用$ uibModal的示例
// create the module, pass in modules it depends on
var app = angular.module('myApp', ['ui.bootstrap']);
// $modal service is now available via the ui.bootstrap module we passed in to our module
app.controller('myCtrl', function($scope, $uibModal) {
//code here
});
只是我今天也遇到的一个问题的补充说明:打开源代码的缩小/丑化处理时,我遇到了类似的错误“未知提供程序:$ aProvider”。
如Angular docs教程中所述(段落:“关于缩小的说明”),您必须使用数组语法来确保正确保存引用以进行依赖项注入:
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
对于Angular UI Bootstrap示例,您提到您应该将其替换为:
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
/* ...example code.. */
}
使用此数组符号:
var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];
有了这一更改,我缩小的Angular UI模态窗口代码又恢复了功能。
提供程序错误的明显答案是在声明模块时缺少依赖项,就像添加ui-bootstrap一样。我们许多人不解释的一件事是升级到新版本时的重大更改。是的,以下应该可以工作,并且不会引发提供程序错误:
var app = angular.module('app', ['ui.router', 'ngRoute', 'ui.bootstrap']);
app.factory("$svcMessage", ['$modal', svcMessage]);
除非我们使用的是ui-boostrap的新版本。现在将模式提供程序定义为:
.provider('$uibModal', function() {
var $modalProvider = {
options: {
animation: true,
backdrop: true, //can also be false or 'static'
keyboard: true
},
我们的建议是,一旦确保包括依赖项,并且仍然出现此错误,我们应该检查我们使用的JS库的版本。我们还可以进行快速搜索,以查看文件中是否存在该提供程序。
在这种情况下,模态提供者现在应如下所示:
app.factory("$svcMessage", ['$uibModal', svcMessage]);
还有一张便条。确保您的ui-bootstrap版本支持当前的angularjs版本。如果没有,您可能会收到其他错误,例如templateProvider。
有关信息,请检查此链接:
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
希望能帮助到你。
var ModalInstanceCtrl = ['$scope', '$modalInstance', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];