알 수 없는 공급자: $modalProvider <- 각도에서의 $modal 오류JS
부트스트랩 Modal 창을 구현하려고 할 때 이 오류가 계속 나타납니다.그 원인은 무엇일까요?http://angular-ui.github.io/bootstrap/ #/modal에서 모든 것을 복사/붙여넣었습니다.
이러한 오류는 컨트롤러, 서비스 등에 대한 종속성을 쓰고 해당 종속성을 생성하거나 포함하지 않은 경우에 발생합니다.
이 경우,$modal는 알려진 서비스가 아닙니다.angular 부트스트랩의 의존관계로 UI 부트스트랩을 전달하지 않은 것 같습니다. 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
});
5년 후(당시에는 이것이 문제가 되지 않았을 것입니다):
네임스페이스가 변경되었습니다.새로운 버전의 bootstrap-ui로 업그레이드한 후 이 메시지가 표시될 수 있습니다.를 참조해 주십시오.$uibModal&$uibModalInstance.
오늘 발생한 문제에 대한 추가 참고 사항입니다.소스 코드 최소화/업글라이프를 켜면 "Unknown provider: $aProvider"와 유사한 오류가 발생했습니다.
Angular docs 튜토리얼(문단: "최소화에 관한 주의")에서 설명한 바와 같이 어레이 구문을 사용하여 의존성 주입에 대한 참조가 올바르게 유지되도록 해야 합니다.
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
Angular UI 부트스트랩의 예에서는, 이것을 치환할 필요가 있습니다.
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 부트스트랩을 추가하는 경우와 같이 모듈을 선언할 때 의존 관계가 누락된다는 것입니다.많은 사람들이 고려하지 않는 것은 새로운 릴리스로 업그레이드 할 때의 변경 사항입니다.네, 다음 동작은 프로바이더 에러가 발생하지 않고 동작합니다.
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 부트스트랩 버전이 현재 angularjs 버전을 지원하는지 확인하십시오.그렇지 않으면 templateProvider 등의 다른 오류가 발생할 수 있습니다.
자세한 내용은 다음 링크를 참조하십시오.
http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html
도움이 됐으면 좋겠네요
되어 있는 후, 는 이 했습니다.$modal로로 합니다.$uibmodal ★★★★★★★★★★★★★★★★★」$modalInstance로로 합니다.$uibModalInstance
var ModalInstanceCtrl = ['$scope', '$modalInstance', function ($scope, $modalInstance, items) {
/* copy rest of example code here */
}];
언급URL : https://stackoverflow.com/questions/18733680/unknown-provider-modalprovider-modal-error-with-angularjs
'source' 카테고리의 다른 글
| 설정 변수를 지정합니다.php 단, 바닥글에는 표시되지 않습니다.php (0) | 2023.03.21 |
|---|---|
| JSON 요소 접근 (0) | 2023.03.21 |
| Wordpress localhost 설치 오류 - PHP 설치에 WordPress에 필요한 MySQL 확장자가 없는 것 같습니다. (0) | 2023.03.21 |
| Oracle SQL, 여러 열 연결 + 텍스트 추가 (0) | 2023.03.16 |
| 팬더에 JSON이 두 개 이상 포함된 파일 로드 (0) | 2023.03.16 |