У меня есть следующие настройки:
- Страница называется
admin.php, где я загружаю все сценарии и CSS - На этой странице есть
<ng-view> маршрут для отображения правильный контент, основанный на том, на что нажали - Список пользователей создан в
editUser.php, где ng-repeat перечисляет все содержимое запроса $ http - Над списком есть кнопка ADD, который должен показывать модал
- Когда я нажимаю, я вижу, что модал загружен (chrome разработчик), но я не вижу его ...
<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>
Там не отображаются ошибки и, как я уже упоминал, код меняет и добавляет модал ... Я просто не вижу этого ... У кого-нибудь есть идея?