Angular JS JQuery 模式未显示
Posted
技术标签:
【中文标题】Angular JS JQuery 模式未显示【英文标题】：Angular JS JQuery modal not showing 【发布时间】：2020-04-27 02:14:24 【问题描述】：我有以下设置：
页面名为admin.php，我在其中加载所有脚本和 CSS
在该页面上有<ng-view> 路由，可根据点击的内容显示正确的内容
在editUser.php 中创建用户列表，其中ng-repeat 列出$http 请求的所有内容
列表上方有一个添加按钮，应该显示一个模式
当我点击时，我可以看到模式已加载（chrome developer），但我看不到它...
<div ng-controller="userCTRL">
<div align="right">
<button type="button" name="add_button" ng-click="addData()" class="btn btn-success">Add</button>
</div>
<!-- MODAL DIV FOR SUCCESS -->
<div class="alert alert-success alert-dismissible" ng-show="success" >
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
successMessage
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="crudmodal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="post" ng-submit="submitForm()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">modalTitle</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger alert-dismissible" ng-show="error" >
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
errorMessage
</div>
<div class="form-group">
<label>Enter First Name</label>
<input type="text" name="first_name" ng-model="first_name" class="form-control" />
</div>
<div class="form-group">
<label>Enter Last Name</label>
<input type="text" name="last_name" ng-model="last_name" class="form-control" />
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="hidden_id" value="hidden_id" />
<input type="submit" name="submit" id="submit" class="btn btn-info" value="submit_button" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div> <!-- end of Modal div -->
</div> <!-- end of controller -->
这是editUser.php
控制器看起来像：
app.controller('userCTRL', function($scope, $http)
$http(
method: 'GET',
url: '../auth/getUserData.php'
)
.then(function(response)
$scope.namesData = response.data;
console.log(response.data);
)
$scope.openModal = function()
var modal_popup = angular.element('#crudmodal');
console.log('openModal function');
$('#crudmodal').show();
//modal_popup.open();
;
$scope.closeModal = function()
var modal_popup = angular.element('#crudmodal');
modal_popup.modal('hide');
;
$scope.addData = function()
console.log('addData function');
$scope.modalTitle = 'Add Data';
$scope.submit_button = 'Insert';
$scope.openModal();
;
);
管理页面是这样的：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular-route.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
</head>
<body ng-app="myApp" >
<div class="menu">
<p><a href="#/!">Main</a>
<a href="#!users">USERS</a>
<a href="logout.php">logout</a></p>
</div>
<div ng-view></div>
<script src="/app/admin.js"></script>
</body>
</html>
没有显示错误，就像我提到的那样，代码更改并添加了模式...我只是看不到它... 有人有想法吗？
【问题讨论】：
【参考方案1】：好吧，真的很蠢，但是我忘记加载 bootstrap.js 了！！！ 现在它正在工作......
谢谢！
【讨论】：
以上是关于Angular JS JQuery 模式未显示的主要内容，如果未能解决你的问题，请参考以下文章
jquery-3.5.1.js:4055 错误数据表无法读取未定义的属性“aDataSort”
未捕获的错误：Bootstrap 的 JavaScript 在 Angular 4 上需要 jQuery