- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我单击模态上的取消按钮时,与模态模板上的 ng-click 绑定(bind)的 $modalInstance.dismiss 函数不起作用。
控制台抛出错误:“$modalInstance.dismiss 不是函数”
模态模板:
<div class="my-modal ng-scope" id="my-modal">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Create a new room</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
Enter a room name<br>
<input type="text" name="new-room-name">
</form>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="modal.cancel()">Cancel</button>
<button class="btn btn-primary" type="button" ng-click="modal.save()">Create Room</button>
</div>
</div>
主 Controller :
(function() {
function HomeCtrl(Room, $scope, $uibModal, $log, $document) {
var home = this;
home.chatRooms = Room.all;
//TO TEST ADD METHOD FROM ROOM.JS
// this.addRoom = Room.add();
home.open = function () {
modalInstance = $uibModal.open({
animation: true,
backdrop: true,
templateUrl: '../templates/modal.html',
controller: 'ModalInstanceCtrl',
controllerAs: 'modal',
bindToContoller: true,
scope: $scope,
size: 'lg',
resolve: {
'$modalInstance': function () { return function () { return modalInstance; } }
}
});
console.log(modalInstance);
modalInstance.result.then(function (newChatRoom) {
home.selected = newChatRoom;
console.log(newChatRoom);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}
angular
.module('blocChat')
controller('HomeCtrl', ['Room', '$scope', '$uibModal', '$log', '$document', HomeCtrl]);
})();
模态 Controller :
(function() {
function ModalInstanceCtrl(Room, $scope, $modalInstance, $log, $document) {
var modal = this;
this.save = function() {
$modalInstance.close(newChatRoom);
};
this.cancel = function() {
$modalInstance.dismiss('cancel');
};
}
angular
.module('blocChat')
.controller('ModalInstanceCtrl', ['Room', '$scope', '$modalInstance', '$log', '$document', ModalInstanceCtrl]);
})();
我花了大约 3 个小时摆弄我的代码,查看 AngularJS Bootstrap UI 文档、几个 StackOverflow 线程和其他网站,但一无所获。任何帮助将不胜感激。
最佳答案
在您使用的 Angular ui Bootstrap 版本中,对模态实例的引用称为 $uibModalInstance
。因此,请尝试将您的 Controller 更改为:
(function() {
function ModalInstanceCtrl(Room, $scope, $uibModalInstance, $log, $document)
{
var modal = this;
this.save = function() {
$uibModalInstance.close(newChatRoom);
};
this.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
}
angular
.module('blocChat')
.controller('ModalInstanceCtrl', ['Room', '$scope', '$uibModalInstance', '$log', '$document', ModalInstanceCtrl]);
})();
关于javascript - AngularJS Bootstrap Modal $modalInstance.dismiss 不是一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47567484/
我正在尝试像这样使用 angularui-bootstrap 调用模态。 var authApp = angular.module('AuthApp', ['ui.bootstrap']); auth
我有一个带有模态的 Angular 项目,我想在关闭时发送多个(两个)参数,问题是它给出的第二个参数未定义,我的代码如下 /*Modal controller*/ angular.module('as
我正在使用 angular-ui 打开和关闭模式。当我使用 submit(object) 或 dismiss(message) 关闭它时,对话框会关闭,但屏幕仍呈灰色,并且我无法访问我的应用程序。一些
我花了一些时间玩 AngularJS Bootstrap 弹出窗口,并且对于意图它工作得很好,但我想做的是绑定(bind)它,它是同一个 Controller 的依赖脚本,我无法工作不过现在是关闭按钮
我有一个带有模式的应用程序,我试图使用 $modalInstance 调用它。根据我在这里读到的其他问题,我不应该在模板中包含 ng-controller ,这正是我所做的,但它仍然不起作用。 这是我
ModalInstance 数据在导入 Controller 时变为 NULL。我也更改了 modelInstance 名称。但没有成功。这里添加我的代码, SaveController.js sco
我使用 controllerAs 语法来避免在我的 Controller 中出现 $scope soup,并且还使用 ui.bootstrap 来呈现模态视图。 我需要打开一个与当前 Controll
我正在使用 Angular Bootstrap ui modal,它工作正常,但是当我尝试使用 modalInstance 关闭它时,它给出了上述错误。这是我的代码 var app = angul
使用 Angular - UI Bootstrap 我将数据传递到如下所示的 modalInstance 中。在模式中,用户能够创建新项目。按下保存按钮后,新项目将发送到服务器。我需要能够使用 $sc
我正在使用 ui-bootstrap 模态窗口,并且我正在尝试测试一种触发该模态窗口的方法。我的 Controller : app.controller('AddProductController',
我试图展示一个简单的是/否模式,但我从一个问题转到另一个问题。我收到的当前错误消息是: Error: [$injector:unpr] http://errors.angularjs.org/1.6.
在我发现用户未登录后的应用程序中,我想打开一个模式对话框: .when('/showtask/:id', {templateUrl: 'Home/Template/showtask', resol
编写一个测试来测试我的应用程序的删除功能。我创建了一个模拟删除 $modal 来模拟取消/确认删除。 var modalInstanceMock= { result:
当我单击模态上的取消按钮时,与模态模板上的 ng-click 绑定(bind)的 $modalInstance.dismiss 函数不起作用。 控制台抛出错误:“$modalInstance.dism
我正在根据 Google 标准编写代码...甚至不确定这个语法的名称,但它与 Controller 的 Angular-UI 示例代码不同,并且我收到 $modalInstance 的注入(injec
我正在使用 $modalInstance。我希望模式显示在特定的 div 上。我知道我可以使用 window-class,但除此之外,我不确定如何将模式的位置设置在某个 div 之上。 有什么想法吗?
我正在使用 $modalInstance。我希望模式显示在特定的 div 上。我知道我可以使用 window-class,但除此之外,我不确定如何将模式的位置设置在某个 div 之上。 有什么想法吗?
编辑:这篇文章末尾的快速和肮脏的解决方案 我正在使用来自 AngularUI-Bootstrap 的模式窗口,其方式与网站上解释的方式相同,只是我拆分了文件。 因此我有: 调用 Controller
我正在使用 Angular UI Bootstrap ,并希望在非对话框的 View 中重用模式对话框中使用的 Controller 。 我尝试稍后通过手动获取 $modalInstance $inj
我有一个简单的模式,其中包含一个表单。 “确定”按钮应该处理成功并关闭模态,而取消按钮应该只是关闭模态。如果我将“确定”按钮放在表单标签内,模态实例在处理程序中显示为未定义。我需要将按钮放在表单内有两
我是一名优秀的程序员,十分优秀!