AngularJS — HTML-страница не показывает возвращенные данные при использовании ngView
Я новичок в AngularJS.
У меня есть php-сервер с базой данных sql, и у меня есть html-страница с AngularJS и кнопка, которая отправляет запрос $ http get на сервер, который возвращает массив данных, который отображается в таблице на той же странице.
Всякий раз, когда я открываю страницу напрямую websitename / myList.htm и нажимаю getList, данные отображаются без проблем, но как только я открываю страницу через маршрутизацию, ngView, появляются элементы страницы, но если я нажимаю кнопку, страница не обновляется с данными с сервера.
Нужна ли дополнительная ссылка на данные между двумя страницами?
myList.htm
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
angular.module("crudApp", [])
.controller("userController", function($scope,$http){
$scope.users = [];
$scope.tempUserData = {};
// function to get records from the database
$scope.getList = function(){
$http.get('action.php', {
params:{
'type':'getList'
}
}).success(function(response){
if(response.status == 'OK'){
$scope.users = response.records;
}
});
};});
</script><body ng-app="crudApp">
<div class="container" ng-controller="userController">
<a href="javascript:void(0);" class="btn btn-success" ng-click="getList()">getList</a><table class="table table-striped">
<tr>
<th width="20%">Name</th>
<th width="30%">Email</th>
<th width="20%">Phone</th>
</tr>
<tr ng-repeat="user in users">
<td>{{user.Name}}</td>
<td>{{user.Email}}</td>
<td>{{user.Phone}}</td>
</tr>
</table>
<p>end of table</p>
</body>
</html>
страница с маршрутами:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/">Main</a></p>
<a href="#list">List</a><div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"})
.when("/list", {
templateUrl : "myList.htm"});
});
</script>
<p>Click on the links to navigate</p>
</body>
</html>
Спасибо.
Решение
Вам нужно одинаковое имя .module для вашего контроллера и вашего app.js, например;
var app = angular.module("myApp", ["ngRoute"]);
angular.module("myApp", []).controller("userController"Причина, по которой вы не работали через ng-route, заключалась в том, что вы загружали «myApp» в первом экземпляре, а затем использовали ng-view для загрузки HTML-страницы, которая будет работать, а потому, что ваш модуль не был добавлен как зависимость на ваш контроллер, он не будет загружать контроллер, потому что он явно искал контроллеры, использующие «myApp», он загружался по прямому маршруту, потому что вы никогда не говорили ему явно использовать «myApp».
Вам также нужно # / list для вашего тега href.
Вам также нужно только один раз сослаться на ваши угловые скрипты для вашего index.html, так как он относится ко всему приложению, потому что когда вы загружаете «myList.htm», вы загружаете дубликат этих скриптов в тегах ng-view. Это работает, если «main.htm» загружается первым вместо «index.html» по умолчанию, ваши маршруты будут работать нормально, даже если вы перейдете непосредственно к localhost: portnum / # / list.
Также вы должны ссылаться на ваши скрипты контроллера в вашем «main.htm», это гарантирует, что они будут загружены для использования в ng-view, для больших страниц вы будете ссылаться на скрипты внизу страницы, такие как;
<script src="scripts/app.js"></script>
<script src="scripts/controller"><script>
Путь к файлу соответствует текущему каталогу проекта.
Надеюсь, поможет!
Другие решения
Других решений пока нет …