Angularjs Angular Bootstrap Modal로 문제를 주입합니다
-
21-12-2019 - |
문제
Angular Bootstrap에서 모달을 통합하고 에서 코드 샘플을 적응 시키려고합니다 내 앱.나는 오류를 얻는다 : Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
$ modalinstance를 만들기 위해 무엇을해야합니까?나는 그들이 작성한 코드 샘플에서 본 기능의 범위 내에 있지만 컨트롤러를 연결할 때 물건을 쓰는 방법을 모르겠습니다.
angular.module('myApp', ['ui.bootstrap']).
controller('ModalInstanceCtrl', function($scope, $modalInstance) {
}).
factory('AuthService', ['$http', '$rootScope', '$modal',
function($http, $rootScope, $modal) {
return {
loginModal: function(callback) {
var modalInstance = $modal.open({
templateUrl: '/partials/main/signin',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {});
}
};
}
]);
. 해결책
확인 - 문제는 실제로 내 템플릿과 함께했습니다.나는 샘플에서 부분적으로 부분적으로 수정되었다 :
<div ng-controller="ModalInstanceCtrl">
<div class="modal-header">
<h3>I am a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
.
실제로 NG 컨트롤러 참조를 제거해야했습니다.
<div>
<div class="modal-header">
<h3>I am a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
.
나는 아직도 나는 각도와 함께 걸린 것처럼 느껴지지 만 이것은 트릭을하는 것처럼 보였다!
다른 팁
MONDAL 예제 예시 , 필요하지 않아도됩니다.NG 컨트롤러 요소를 지정하십시오.모달을 정의 할 때 컨트롤러 속성을 지정할 수 있습니다.
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
},
dataModel: function () {
return $scope.data;
}
}
});
. 제휴하지 않습니다 StackOverflow