все!
Я делаю угловое приложение и хочу реализовать простое модальное всплывающее окно, которое позволит пользователям «создавать» URL.
Моя страница выглядит так:
Вот HTML-код кнопки URL (третьей в строке), которая должна активировать мою кнопку.
<button class="btn btn-secondary" ng-click="vm.showUrlModal()" id="button-url-to-modal" type="button" title="Hyperlink <a> Ctrl+L"><img src="/images/url.png" height="18px"/></button>
Контроллер, обрабатывающий страницу, выглядит следующим образом:
(function() {
function postchallengeController($uibModal, newChallengeData) {
var vm = this;
vm.message = "Post a challenge!";
vm.showUrlModal = function() {
$uibModal.open({
templateUrl: '/url_modal/url_modal.view.html',
controller: 'url_modal',
controllerAs: 'vm',
})
}
postchallengeController.$inject = ['$uibModal', 'newChallengeData'];
/* global angular */
angular
.module('stackunderflow')
.controller('postchallengeController', postchallengeController);
})();
И указанный контроллер url_modal:
(function() {
function url_modal($uibModalInstance) {
var vm = this;
vm.modal = {
cancel: function() {
$uibModalInstance.close();
}
};
}
url_modal.$inject = ['$uibModalInstance'];
/* global angular */
angular
.module('stackunderflow')
.controller('url_modal', url_modal);
})();
В указанном документе (/url_modal/url_modal.view.html) находится простой Hello World, который должен отображаться при открытии модального окна - однако при этом страница открывает модальное окно с текущим содержимым с наложением поверх него.
Смотрите здесь:
Что я мог делать не так?
Спасибо!
РЕДАКТИРОВАТЬ: в моем index.html есть ссылки на оба контроллера, и мой модуль содержит ['ui.bootstrap']