Когда я добавляю $ uibModalInstance к моему контроллеру, я получаю ошибку:
Неизвестный поставщик: $uibModalInstanceProvider <- $uibModalInstance <- EventAdditionalInformationTabCtrl
Мой контроллер определяется как:
angular.module('myWebApp.controllers').
controller('EventAdditionalInformationTabCtrl', function ($scope, $uibModalInstance, eventData) {
});
У меня есть другой контроллер, который определяет открытую функцию:
controller('modalCtrl', function ($scope, $uibModal) {
$scope.open = function (template, instance, size) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: template,
controller: instance,
size: size
});
};
}).
Затем я хочу передать контроллер, который будет обрабатывать определенный экземпляр модального, в данном случае EventAdditionalInformationTabCtrl
.
Мое приложение определено как:
var app = angular.module('myWebApp', [
'myWebApp.services',
'myWebApp.controllers',
'ui.router',
'duScroll',
'ngAnimate',
'ui.bootstrap',
'angularUtils.directives.dirPagination',
'angular-loading-bar'
]);
Что мне не хватает?
РЕДАКТИРОВАТЬ ----
Здесь как EventAdditionalInformationTabCtrl связано с представлением в ui-Router.
$stateProvider
.state('event', {
url: '/event',
params: {
eventId: null
},
resolve: {
eventData: ['$http', '$stateParams', function ($http, $stateParams) {
console.log('EventId: ' + $stateParams.eventId);
return $http.get('http://localhost:10569/api/eventView/' + $stateParams.eventId).then(function(response) {
return response.data;
});
}]
},
views: {
'': {
templateUrl: 'partials/events/event.html'
//controller: 'EventCtrl'
},
'eventHeader@event' : {
templateUrl: 'partials/events/event-header.html',
controller: 'EventHeaderCtrl'
},
'eventOverviewTab@event': {
templateUrl: 'partials/events/event-overview-tab.html',
controller: 'EventOverviewTabCtrl'
},
'eventDSOTab@event': {
templateUrl: 'partials/events/event-dso-tab.html',
controller: 'EventDSOTabCtrl'
},
'eventAdditionalInformationTab@event': {
templateUrl: 'partials/events/event-additional-information-tab.html',
controller: 'EventAdditionalInformationTabCtrl'
},
'eventFooter@event': {
templateUrl: 'partials/events/event-footer.html',
controller: 'EventFooterCtrl'
}
}
});
Вам нужно ввести "$ uibModal" в ваш контроллер.
Проверьте угловые ui docs здесь https://angular-ui.github.io/bootstrap/#/modal
РЕДАКТИРОВАТЬ:
Изменить это
animation: true,
templateUrl: template,
controller: instance,
size: size
к этому
animation: true,
templateUrl: template,
controller: EventAdditionalInformationTabCtrl,
size: size
Где у вас $uibModalInstance
теперь должно быть только $uibModal
. Используйте $uibModalInstance
когда вы хотите создать модальный. Этот plunker является официальным примером того, как использовать $uibModal
.
function (template, instance, size) { var modalInstance =
. Эти части не нужны. Вы хотите, чтобы $scope.open
был $uibModal.open()
.