AngularJS与jQuery模态框加载后无法显示问题求助

我来帮你梳理下这个模态框不显示的问题，结合你的代码细节，主要有几个核心原因和对应的修复步骤：

1. 缺少Bootstrap JavaScript依赖 #

你的admin.php页面只引入了Bootstrap的CSS，但Bootstrap的模态框功能完全依赖它自身的JS文件。没有这个JS，模态框的弹窗逻辑（遮罩层、动画、状态切换）都无法触发，哪怕你手动用show()显示DOM元素，也会因为缺少必要的样式和事件绑定而看不到效果。

修复：添加Bootstrap JS文件 #

在admin.php的<head>里，jQuery之后添加Bootstrap 3.3.6的JS（和你用的CSS版本保持一致）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- 添加这一行 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<!-- 其他脚本... -->

2. 错误的模态框触发方式 #

你的openModal方法里用了$('#crudmodal').show()，这只是原生jQuery显示元素的方法，但Bootstrap模态框需要用它提供的modal('show')方法来初始化弹窗逻辑（比如给body添加modal-open类、显示遮罩层、处理fade动画）。

修复：修改openModal方法 #

把控制器里的openModal改成：

$scope.openModal = function() {
    console.log('openModal function');
    $('#crudmodal').modal('show'); // 用Bootstrap的模态框触发方法
};

3. 多余的模态框插件冲突 #

你引入了jquery-modal.js，这个插件和Bootstrap的模态框功能完全重叠，会导致方法冲突（比如两个插件都定义了modal方法），反而干扰Bootstrap模态框的正常工作。

修复：移除冲突的插件 #

删掉admin.php里的这一行：

<!-- 移除这个冲突的插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.js"></script>

额外优化建议 #

虽然上面的修改能解决问题，但在AngularJS项目里，尽量避免直接用jQuery操作DOM，推荐使用AngularJS UI Bootstrap组件（专门为AngularJS封装的Bootstrap组件），这样能更好地和Angular的双向绑定、生命周期配合，减少DOM操作的问题。

完成以上修改后，点击Add按钮应该就能正常弹出模态框了，你可以再用Chrome开发者工具检查body是否添加了modal-open类，以及模态框元素是否有in类（Bootstrap用来标记显示状态的类）。

内容的提问来源于stack exchange，提问作者Jasper