无法再次获得 Popup 的模态 - AngularJS
Cannot get modal to Popup again - AngularJS
我目前正在向AngularJS介绍自己,我正在为一个按钮编写代码,单击该按钮时会弹出一个模态。模态很好地弹出。当我单击模态上的"X"时,它也消失了。当设置为 false 以使模态弹出时,布尔值再次变为 true,一切顺利,但模态不会第二次弹出。为什么会这样?
.HTML:
<input type="button" ng-click="toggleModal()" class="btn btn-default" value="Path">{{showModal}}
<modal title="Select a Testcase" visible="showModal">
<form role="form" >
<div class="form-group" style="padding: 5%">
<div id="tree_div"></div>
</div>
<input type="button" value="Submit" class="btn btn-default">
</form>
</modal>
JAVASCRIPT:
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
命令:
'use strict';
angular.module('chariot').directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});
我被困在上面几个小时了!我缺少什么吗?任何见解都会有所帮助。谢谢
我认为您应该使用对象而不是简单的值来$scope.showModal
。例:
控制器:
$scope.showModal = {visible: false};
$scope.toggleModal = function(){
$scope.showModal.visible = !$scope.showModal.visible;
};
视图:
<input type="button" ng-click="toggleModal()" class="btn btn-default" value="Path">{{showModal}}
<modal title="Select a Testcase" show-modal="showModal">
<form role="form" >
<div class="form-group" style="padding: 5%">
<div id="tree_div"></div>
</div>
<input type="button" value="Submit" class="btn btn-default">
</form>
</modal>
命令:
angular.module('chariot').directive('modal', function () {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:{
title: '@',
showModal: '=',
},
link: function postLink(scope, element, attrs) {
if( typeof( scope.showModal.visible ) === "undefined" ) {
scope.showModal.visible = false;
}
scope.$watch('showModal.visible', function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.showModal.visible = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.showModal.visible = false;
});
});
}
};
});
将对象绑定到指令时,可以从指令更改其属性,这些更改也将反映到控制器。
代码的另一个问题是它的指令有replace: true
- 所以当你在视图中声明时 <modal title="Select a Testcase" show-modal="showModal">
- 这些数据将被指令 html 替换,并使该属性不再可用。
为了克服这个问题,我发出指令,通过更改映射从范围中获取值,而不是属性:
scope:{
title: '@', // Use the title attribute value as a string
showModal: '=', // use the "show-modal" attribute as an object
},
相关文章:
- 打开一个模态并将其链接到AngularJS中的指令
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 点击AngularJS模态窗口捕捉背景事件
- 在angularJS中使用模态窗口时,在控制器之间共享对象数组
- Angularjs - 观察模态窗口从另一个控制器关闭
- 通过AngularJS中的模态编辑对象-使用临时对象
- angularJS,一个部分或模态通知,加载几秒钟后就会消失
- 使用角度模态服务(AngularJS)自定义模态
- 如何在angularjs-ui-bootstrap中使用模态弹出窗口
- angularjs模态将数据传输到外部控制器的正确方法
- angularjs ng repeat不会在模态框中循环
- AngularJS bootstrap.ui模态未显示
- 如何在AngularJS点击事件中将数据传递到模态中
- AngularJS:将变量传递给模态
- 无法再次获得 Popup 的模态 - AngularJS
- 如何使用 AngularJS 进行模态
- 从模态 AngularJS 获取数据
- AngularJS ng-click:如何将行数据传递到模态弹出文本框
- AngularJS 引导模态结果而不关闭
- 创建一个模态窗口以使用 AngularJS 加载数据