从Angular控制器中打开Bootstrap弹出窗口

Question

在 Angular 模板中，我有两个锚点。第一个在弹出窗口中显示文本，第二个在弹出窗口中显示图片。就像这样：

<a ng-click="openPopup('Text')">Text popup</a><a ng-click="openPopup('Image')">Image popup</a>

我有两种不同的弹出窗口，分别用于文本和图片。如果用户点击“Text popup”，我想打开文本弹出窗口，就像打开图片一样。 以下是示例文本和图片弹出窗口代码。

    <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>

在控制器中：

    $scope.openPopup = function(Value) {
            if(Value=='Text'){
                //open Text popup
            }else{
                //open Image popup
            }
       }

我正在使用ui.bootstrap.modal，如何实现这一点？

- Rahul

---

文档中明确说明了 https://angular-ui.github.io/bootstrap/#/modal - masimplo

你说你正在使用 ui.bootstrap.modal？那么 @Jenson 的回答有正确的方法。 - Karthik

Answer 1

将两个模态框保存为两个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
            });
        }
   }

- Jenson Raby

Answer 2

您可以这样打开模式窗口。

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

Bootstrap JS Modal

- LeadsArchive

---

我希望使用Angular而不是jquery - Rahul

Answer 3

您可以为您的模态 HTML 代码分配 ng-hide 或 ng-show 属性

<div ng-show="showModal">

那么你所要做的就是在想要显示模态屏幕时将$scope.showModal切换为true，并将其切换为false以隐藏它。

另一种方法是使用angular-ui依赖项并使用基于bootstrap的$modal属性。

https://angular-ui.github.io/bootstrap/#/modal

- ibrahimbayer

Answer 4

谢谢大家的回复。 我已经找到了答案。 这是我们可以实现的方法。

$scope.openPopup = function(Value) {
        var elementText = angular.element('#myTextModal');
        var elementImage = angular.element('#myImageModal');
            if(Value=='Text'){
                elementText.modal('show');
            }else{
                elementImage.modal('show');
            }
       }

- Rahul

---

有任何降低投票的原因吗？ 这就是我正在寻找的。 - Rahul