[英]Unknown Provider Error, Dependency Injection, Modal Controller
I am attempting to build a custom modal service to accept data and produce a modal with those inputs; 我正在尝试构建一个定制的模态服务,以接受数据并使用这些输入生成模态; however, I am receiving the unknown provider error is Angular when passing the literal identifier of the controller to the
controller
property of the modal. 但是,当将控制器的文字标识符传递给模态的
controller
属性时,我收到未知的提供程序错误为Angular。
I've got dependency injection working elsewhere in my application; 我的应用程序中的其他地方都有依赖注入。 it is only failing, here.
这只是失败,在这里。 There are a number of questions on SO dealing with this issue, I know;
我知道有很多关于SO的问题要解决。 however, out of those that I have read, I am unable to find a more generic answer that might begin to point me in the right direction.
但是,在我已阅读的内容中,我找不到更通用的答案,可能会开始向我指出正确的方向。
Here is my service code: 这是我的服务代码:
angular.module('app').service('CustomModalService', ['$uibModal', function ($uibModal) {
this.openCustomModal = function (size, title, message, action) {
var actionToPerformOnConfirm = action;
var modalInstance = $uibModal.open({
templateUrl: 'templates/CustomModal.html',
controller: 'CustomModalInstanceController',
controllerAs: 'vm',
size: size,
resolve: {
content: function () {
return {
title: title,
message: message
};
}
}
});
modalInstance.result.then(function (actionToPerformOnConfirm) {
console.log('something happened');
}.bind(this));
};
}]);
And here is the modal Controller, referenced, above: 这是上面引用的模态控制器:
angular.module('app').controller('CustomModalInstanceController', function ($uibModalInstance, content) {
var vm = this;
vm.title = content.title;
vm.message = content.message;
$scope.confirmAction = function () {
$uibModalInstance.close();
};
$scope.cancelAction = function () {
$uibModalInstance.dismiss('cancel');
};
});
This should be enough from what I understand of Angular. 根据我对Angular的了解,这应该足够了。 Everything works in this service, otherwise , if the controller reference is removed.
一切都将在此服务中运行,否则 ,如果除去了控制器引用,则一切正常 。
There's even this question (a great summation of all the questions I have encountered) which corroborates the documentation and the numerous examples I have seen online; 甚至还有一个问题 (对我所遇到的所有问题进行了很好的总结),佐证了文档以及我在网上看到的众多示例。 yet, I am still getting the unknown provider error.
但是,我仍然收到未知的提供程序错误。 This user even asks the same question (again, from what I can see, my code is a shining example of "correct")!
这个用户甚至问了同样的问题 (再次,从我的看到,我的代码是“正确”的一个很好的例子)!
To show that both are in the same directory, here is a picture of the directory structure: 为了显示两者都在同一目录中,这是目录结构的图片:
Where do I need to begin to look to resolve this issue? 我需要从哪里着手解决该问题? Is this an application configuration issue?
这是应用程序配置问题吗?
I am going to answer my own question, in great thanks to Manu Antony for working with me. 我要回答我自己的问题,非常感谢Manu Antony与我一起工作。 The problem was not the injection of the controller, itself, but rather with the parameters supplied to the controller.
问题不在于控制器本身的注入,而是在于提供给控制器的参数。
In the end, it was a syntactical error on my part. 最后,这是我的语法错误。
Here is the correct controller signature syntax (I added scope for fun): 这是正确的控制器签名语法(我添加了乐趣的范围):
angular.module('app').controller('CustomModalInstanceController', ['$scope', '$uibModalInstance', 'content', function ($scope, $uibModalInstance, content) { ...
When I do encounter these issues, they are very frustrating. 当我遇到这些问题时,它们非常令人沮丧。 The steps I take to resolve these issues are to go back to the script tag in the html and make sure the ID is the same as the templateUrl.
解决这些问题的步骤是返回html中的script标记,并确保ID与templateUrl相同。 So here i am showing you where i create my modal:
所以在这里,我向您展示我创建模态的位置:
var editPatient = $uibModal.open({ //Here is where the modal gets created. you set the html page and the controller
templateUrl: 'EditPatientData.html',
controller: 'EditPatientData',
size: size,
resolve: {
data: function () {
return angular.copy(patientModel);
}
}
});
Now Below I am showing you the code in my Html file that maps to the code above. 现在,在下面,我向您显示Html文件中映射到上面代码的代码。 Make sure the ID in the script tag is exactly the same in your js.
确保脚本标签中的ID与您的js中的ID完全相同。 (I suggest you use copy and paste to avoid spelling errors.)
(我建议您使用复制和粘贴以避免拼写错误。)
<script type="text/ng-template" id="EditPatientData.html">
<div class="modal-header">
<h3 class="modal-title">Edit Patient Data</h3>
</div>
<div class="modal-body">
//whatever you want to display
</div>
</script>
Hopefully this answers your question. 希望这能回答您的问题。 If you need any more help, or more specification, do not hesitate to ask.
如果您需要更多帮助或更多规格,请随时询问。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.