Change jquery + Bootstrap modal-dialog div to BootStrap + an

Question

我在一个jsp中有多个引导对话框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控制器并对其进行了测试之后，我编写了下面的代码来打开上面的对话框:

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

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

我想知道我是否可以通过angularjs打开引导模态对话框。我想避免从头开始重写所有模态对话框，而使用angularjs作为大量的数据是通过JSTL加载的。我对angularjs很陌生和做什么在这个"在angularjs思考"中说，如果我有jQuery的背景?没那么简单

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

我的约束是，我想保持所有的对话框在一个单一的jsp，因为它们将是多个UI页面共同的

Answer 1

我按照Matthew Green在他的评论中建议的去做．我使用ng-template生成了div，并通过angularjs的uibModal打开调用加载了它。写了一个单独的控制器dialogController，它将处理所有的动作和范围变量和我的模态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('dialogController', [ '$scope','msg','$uibModalInstance' ,function($scope, msg,$uibModalInstance) {
    $scope.msg = msg;
    $scope.close = function() {
         $uibModalInstance.dismiss('cancel');
        };
} ])