javascript - 将 jquery + Bootstrap modal-dialog div 更改为 BootStrap + angularjs

Question

我在一个 jsp 中有多个 Bootstrap 对话框 div。

对话框 div 如下所示

<div id="manage-notes-dialog" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="about">NOTES <input name="backButton" type="button" value="&#8666; " class="btn btn-primary pull-right" /></h3>
        </div>
        <div class="modal-body">
            .......UI HTML.........
            .......UI HTML.........
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

在我的 jquery 按钮点击中，我打开了如下对话框

$("#manage-notes-dialog").modal('show');

以上命令是按钮的 jquery 单击操作的一部分

我正在将我的 UI 处理从 jQuery 更改为 angularjs。

在编写 angularjs Controller 并对其进行测试后，我编写了以下代码来打开上述对话框。

$scope.openNotes = function() {
    $("#manage-notes-dialog").modal('show');
};

这仍然没有完全使用 angularjs 作为 $("#manage-notes-dialog").modal('show'); 仍然是 jQuery 并在我删除 jquery js 时停止。

我想知道是否可以通过 angularjs 打开 Bootstrap 模式对话框。 我想避免在使用 angularjs 时从头开始重写所有模式对话框，因为大量数据是通过 JSTL 加载的。我对 angularjs 很陌生 并按照本 “Thinking in AngularJS” if I have a jQuery background? 中所说的进行操作没那么简单

请建议可能的解决方法/解决步骤。我发现的大多数解决方案/示例都完全使用 angularjs 模态指令。或个人 html。

我的约束是我想将所有对话框保留在一个单独的 jsp 中，因为它们对于多个 UI 页面是通用的

Answer 1

我遵循了 Matthew Green 在他的评论中的建议.使用 ng-template 我生成了 div 并通过 angularjs uibModal 打开调用加载它。编写了一个单独的 Controller dialogController，它将处理我的 Modal div 使用的所有操作和范围变量和操作。

下面是我用来从模板缓存中打开 div 的 javascript 调用。

var modalInstance = $uibModal.open({
                              templateUrl: 'error-dialog',
                              controller: 'dialogController',
                              scope: $scope,
                              resolve: {                   
                                  msg: function(){
                                  return 'ErrorMessage for DIsplay';
                                }
                            }
                    });

javascript 中的 div 元素如下所示

<script type="text/ng-template" id="error-dialog">
            <div class="modal-body alert-danger">
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal" ng-click="close()">&#10539;</button>
                <pre class="alert-danger" style="border:0px;">{{msg}}</pre>
            </div>
</script>

最后是 Controller

.controller('dialogController', [ '$scope','msg','$uibModalInstance' ,function($scope, msg,$uibModalInstance) {
    $scope.msg = msg;
    $scope.close = function() {
         $uibModalInstance.dismiss('cancel');
        };
} ])