我在一个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相当陌生,并且按照“Thinking in AngularJS” if I have a jQuery background?中的说明进行操作并不那么简单

请提出可能的解决方法/解决方案步骤。我发现的大多数解决方案/示例都完全使用angularjs modal指令。或单个html。

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

最佳答案

我听了马修·格林在评论中的建议

使用ng-template我生成了div并通过angularjs uibModal打开调用加载了它。编写了一个单独的控制器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('dialogController', [ '$scope','msg','$uibModalInstance' ,function($scope, msg,$uibModalInstance) {
    $scope.msg = msg;
    $scope.close = function() {
         $uibModalInstance.dismiss('cancel');
        };
} ])

关于javascript - 将jQuery + Bootstrap模态对话框div更改为BootStrap + angularjs,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40663990/

10-12 00:00
查看更多