$uibModal templateUrl 不改变模态内容
$uibModal templateUrl does not change modal content
全部!
我正在制作一个 angular 应用程序并想实现一个简单的模态 window 弹出窗口,它将允许用户 "construct" 一个 URL.
我的页面是这样的:
这是 URL 按钮的 HTML(行中第三个),它会触发我的按钮。
<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']
错误可能隐藏在 html 文件的引用中。
确保 /url_modal/
目录的父目录设置为您使用 express.static 函数调用设置的根文件夹。
全部! 我正在制作一个 angular 应用程序并想实现一个简单的模态 window 弹出窗口,它将允许用户 "construct" 一个 URL.
我的页面是这样的:
这是 URL 按钮的 HTML(行中第三个),它会触发我的按钮。
<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']
错误可能隐藏在 html 文件的引用中。
确保 /url_modal/
目录的父目录设置为您使用 express.static 函数调用设置的根文件夹。