javascript - 从 Angular Controller 打开 Bootstrap 弹出窗口

Question

在 Angular 模板中我有两个 anchor ，第一个在弹出窗口中显示文本，第二个在弹出窗口中显示图像，就像这样:

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

在 Controller 中:

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