Question

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

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

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

    <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

您可以为模式html代码

指定ng-hide或ng-show属性

~/rpmbuild/RPMS

然后，您只需要在显示模态屏幕时将<div ng-show="showModal">切换到$scope.showModal，然后true将其隐藏起来。

另一种方法是使用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');
            }
       }

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

4 个答案: