[英]$injector error when using angular-bootstrap ($modalInstanceProvider <- $modalInstance)
I've been playing around with this bug but I can't seem to figure it out.我一直在玩这个错误,但我似乎无法弄清楚。 The problem started when I pushed the angular-bootstrap models I had added to the prod server.当我推送我添加到 prod 服务器的 angular-bootstrap 模型时,问题就开始了。 The original error was this:原来的错误是这样的:
"AngularJS Error: Unknown provider: aProvider <- a" “AngularJS 错误:未知提供者:aProvider <- a”
I'm pretty sure I was getting that error because my files weren't minifying correctly.我很确定我收到了那个错误,因为我的文件没有正确缩小。 So I went through my controllers and found that I wasn't $injecting $modal
instance into my controllers and that's when I ran into this problem.所以我检查了我的控制器,发现我没有$injecting $modal
实例$injecting $modal
到我的控制器中,这就是我遇到这个问题的时候。
Whenever I inject $modalInstance
into my controller in the minified format I get this error.每当我以缩小格式将$modalInstance
注入控制器时,我都会收到此错误。 I am not using the format angular-bootstrap suggests because I have a lot going on and many controllers on the site I'm building so I combined everything into one controller instead of several functions.我没有使用 angular-bootstrap 建议的格式,因为我有很多事情要做,而且我正在构建的站点上有很多控制器,所以我将所有东西组合成一个控制器,而不是几个功能。
My Controller:我的控制器:
.controller('CreateGroupCtrl', ['$scope', '$http', '$window', '$cookies', '$modal', '$log', 'FeedService', '$modalInstance',
function CreateGroupCtrl($scope, $http, $window, $cookies, $modal, $log, $modalInstance, FeedService) {
$scope.createGroupCall = function createGroupCall(teacher, name) {
if(teacher != null && name != null) {
FeedService.createGroupCall($cookies.token, $window.sessionStorage.user, teacher, name).success(function(data) {
console.log('GroupCreated');
}).error (function(status,data,token) {
console.log(status);
console.log(data);
});
} else {
alert("Error!");
}
}
/***********ANGULAR-UI MODAL CODE**********/
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'CreateGroupContent.html',
controller: CreateGroupCtrl,
size: size
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
My Template:我的模板:
<button ng-controller="CreateGroupCtrl" ng-click="open()" type="button" id="creategroup" class="btn ns-btn">
<img class="ns-add" src="images/createGroup.png">
<p class="create">Create Group</p>
</button>
<div>
<script type="text/ng-template" id="CreateGroupContent.html">
<div class="modal-header">
<h2 class="modal-title ns-modal-title">Create A Group</h2>
<button class="ns-modal-close" ng-click="cancel()"><img src="images/xCancel.png"></button>
</div>
<div class="modal-body">
<form class="form-signin" role="form">
<input type="text" class="form-control ns-modal-form" placeholder="Teacher" ng-model="create.teacher" required autofocus>
<input type="text" class="form-control ns-modal-form" placeholder="Group Name" ng-model="create.name" required>
</form>
</div>
<div class="modal-footer">
<button class="btn ns-modal-add ns-btn" ng-click="createGroupCall(create.teacher, create.name); ok();" type="submit">Create</button>
</div>
</div>
</script>
</div>
At first, you need to inject all in its order.首先,您需要按顺序注入所有内容。
Also, you should inject $modal
into the controller in which you would like to create your modal view.此外,您应该将$modal
注入要在其中创建模态视图的控制器。 And the $modalInstance
can be injected ONLY into the controller which is used for this $modal
window.和$modalInstance
可以仅注射入用于此控制器$modal
窗口。 In your case you use the same controller, so you couldn't inject $modalInstance
在您的情况下,您使用相同的控制器,因此您无法注入$modalInstance
Also, in your case (when you use only 1 controller) - you can pass as object field scope
which will be used as parent of $scope
for your modal view.此外,在您的情况下(当您仅使用 1 个控制器时)-您可以作为对象字段scope
传递,该scope
将用作模态视图的$scope
父级。 By default it is $rootScope
, but you can type:默认情况下它是$rootScope
,但您可以输入:
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'CreateGroupContent.html',
controller: CreateGroupCtrl,
size: size,
scope: $scope
});
So now your functions ok()
and cancel()
will be available in your modal view and modal scope.所以现在你的函数ok()
和cancel()
将在你的模态视图和模态范围中可用。
Looks like your FeedService
and $modalInstance
are mixed up.看起来您的FeedService
和$modalInstance
混淆了。 They need to be in the same order.它们的顺序必须相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.