从角度控制器打开引导弹出窗口。

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

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

You can open modals like this

你可以像这样打开modals

$scope.openPopup = function(Value) {
        if(Value=='Text'){
            $("myTextModal").modal("show");
        }else{
            $("myImageModal").modal("show");
        }
   }

Bootstrap JS Modal

引导JS模态

#3

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