In angular Template I have two anchors,first display text inside popoup and second one display images inside popup,Like this:
在角度模板中,我有两个锚点,第一个显示文本在popoup内,第二个在弹出窗口内显示图像,像这样:
<a ng-click="openPopup('Text')">Text popup</a><a ng-click="openPopup('Image')">Image popup</a>
I have a two different popup's for Text and Images.I want to open text popup if user click "Text popup". Same like Image. Here is the sample text and Image popup code.
我有两个不同的文本和图像弹出窗口。我想打开文本弹出,如果用户点击“文本弹出”。像图片一样。这是示例文本和图像弹出代码。
<div class="modal fade" id="myTextModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" style="width:800px" role="document">
//Content goes here
</div>
</div>
<div class="modal fade" id="myImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" style="width:800px" role="document">
//Content goes here
</div>
</div>
In controller:
控制器:
$scope.openPopup = function(Value) {
if(Value=='Text'){
//open Text popup
}else{
//open Image popup
}
}
I am using ui.bootstrap.modal How can I achieve this?
我用ui.bootstrap。我怎样才能做到这一点呢?
4 个解决方案
#1
3
save both the modals to two html file and use this to open pop up
将这两个modals保存到两个html文件中,并使用它打开弹出窗口
$scope.openPopup = function(Value) {
if(Value=='Text'){
$scope.modalInstance = $modal.open({
templateUrl: 'views/text.html',
scope: $scope
});
}else{
$scope.modalInstance = $modal.open({
templateUrl: 'views/image.html',
scope: $scope
});
}
}
#2
1
You can open modals like this
你可以像这样打开modals
$scope.openPopup = function(Value) {
if(Value=='Text'){
$("myTextModal").modal("show");
}else{
$("myImageModal").modal("show");
}
}
引导JS模态
#3
0
You can assign a ng-hide or ng-show property to your modal html code
您可以为您的模态html代码分配一个ng-hide或ng-show属性
<div ng-show="showModal">
then all you have to do is swithcing the $scope.showModal
to true
whenever you want to show your modal screen and false
to hide it.
然后,你所要做的就是把这个范围缩小。当你想显示你的模态屏幕时,显示模式为true,然后显示为false以隐藏它。
another method is using angular-ui dependency and use $modal property which is based on bootstrap.
另一种方法是使用angular-ui依赖项,并使用基于bootstrap的$modal属性。
https://angular-ui.github.io/bootstrap/#/modal
https://angular-ui.github.io/bootstrap/ /模态
#4
-1
Thanks guys for replying. I just found my answer. This is how we can achieve.
感谢各位回复。我刚找到了答案。这是我们的目标。
$scope.openPopup = function(Value) {
var elementText = angular.element('#myTextModal');
var elementImage = angular.element('#myImageModal');
if(Value=='Text'){
elementText.modal('show');
}else{
elementImage.modal('show');
}
}
#1
3
save both the modals to two html file and use this to open pop up
将这两个modals保存到两个html文件中,并使用它打开弹出窗口
$scope.openPopup = function(Value) {
if(Value=='Text'){
$scope.modalInstance = $modal.open({
templateUrl: 'views/text.html',
scope: $scope
});
}else{
$scope.modalInstance = $modal.open({
templateUrl: 'views/image.html',
scope: $scope
});
}
}
#2
1
You can open modals like this
你可以像这样打开modals
$scope.openPopup = function(Value) {
if(Value=='Text'){
$("myTextModal").modal("show");
}else{
$("myImageModal").modal("show");
}
}
引导JS模态
#3
0
You can assign a ng-hide or ng-show property to your modal html code
您可以为您的模态html代码分配一个ng-hide或ng-show属性
<div ng-show="showModal">
then all you have to do is swithcing the $scope.showModal
to true
whenever you want to show your modal screen and false
to hide it.
然后,你所要做的就是把这个范围缩小。当你想显示你的模态屏幕时,显示模式为true,然后显示为false以隐藏它。
another method is using angular-ui dependency and use $modal property which is based on bootstrap.
另一种方法是使用angular-ui依赖项,并使用基于bootstrap的$modal属性。
https://angular-ui.github.io/bootstrap/#/modal
https://angular-ui.github.io/bootstrap/ /模态
#4
-1
Thanks guys for replying. I just found my answer. This is how we can achieve.
感谢各位回复。我刚找到了答案。这是我们的目标。
$scope.openPopup = function(Value) {
var elementText = angular.element('#myTextModal');
var elementImage = angular.element('#myImageModal');
if(Value=='Text'){
elementText.modal('show');
}else{
elementImage.modal('show');
}
}