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

Question

在角度模板中，我有两个锚点，第一个在弹出窗口中显示文本，第二个在弹出窗口中显示图像，如下所示：

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

我有两个不同的文本和图像弹出窗口。如果用户单击“文本弹出窗口”，我想打开文本弹出窗口。与图像相同。 这是示例文本和图像弹出代码。

    <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 我该如何实现？

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
            });
        }
   }

Answer 2

你可以像这样打开模态

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

Bootstrap JS Modal

Answer 3

您可以将 ng-hide 或 ng-show 属性分配给模态 html 代码

<div ng-show="showModal">

那么您所要做的就是将$scope.showModal 切换为true，只要您想显示您的模态屏幕，然后false 就可以隐藏它。

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

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

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');
            }
       }