부트 스트랩 모달 창을 구현하려고 할 때이 오류가 계속 발생합니다. 그 원인은 무엇일까요? http://angular-ui.github.io/bootstrap/#/modal의 모든 내용을 여기에 복사 / 붙여 넣기 했습니다.
부트 스트랩 모달 창을 구현하려고 할 때이 오류가 계속 발생합니다. 그 원인은 무엇일까요? http://angular-ui.github.io/bootstrap/#/modal의 모든 내용을 여기에 복사 / 붙여 넣기 했습니다.
답변:
이러한 종류의 오류는 컨트롤러, 서비스 등에 대한 종속성을 작성하고 해당 종속성을 만들거나 포함하지 않은 경우 발생합니다.
이 경우 $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
});
5 년 후 (당시에는 문제가되지 않았을 것입니다) :
네임 스페이스가 변경되었습니다. 최신 버전의 bootstrap-ui로 업그레이드 한 후이 메시지가 표시 될 수 있습니다 . $uibModal& 를 참조해야합니다 $uibModalInstance.
오늘도 경험 한 문제에 대한 추가 참고 사항입니다 . 소스 코드 축소 / 추적 을 켰을 때 유사한 오류 "알 수없는 공급자 : $ aProvider"가 발생했습니다 .
Angular 문서 자습서 (단락 : "축소화에 대한 참고 사항") 에서 언급했듯이 종속성 주입을 위해 참조가 올바르게 유지되는지 확인하려면 배열 구문을 사용해야합니다.
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];를 들어 각도 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-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
도움이되기를 바랍니다.