AngularJS - HTML-страница не отображает возвращенные данные при использовании ngView

Я новичок в AngularJS.AngularJS - HTML-страница не отображает возвращенные данные при использовании ngView

У меня есть 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>

Спасибо.

источник

2016-11-07 yabawi

показать нам код –

Для вашего контроллера и вашего приложения app.js вам необходимо указать одинаковое имя .module, например;

var app = angular.module("myApp", ["ngRoute"]); 
angular.module("myApp", []).controller("userController"

Причина твоя не работает через нг маршрута потому, что вы грузили «MYAPP» по первой инстанции, а затем с помощью нг ракурс, чтобы загрузить страницу HTML, которая будет работать, а потому, что ваш модуль не был добавлен в качестве зависимости от вашего контроллера, он не загружал бы контроллер, потому что он явно рассматривал контроллеры, которые используют «myApp», который загружается через прямой маршрут, потому что вы никогда не говорили ему явно использовать «myApp».

Вам также нужен #/список для вашего тега href.

Вам также нужно только ссылаться на свои угловые сценарии один раз для вашего index.html, поскольку он относится ко всему приложению, потому что когда вы загружаете «myList.htm», вы загружаете дубликат этих скриптов в ng -view tags. Это работает, если сначала загружается «main.htm» вместо стандартного «index.html», ваши маршруты будут работать нормально даже при переходе непосредственно на localhost: portnum/#/list.

Также вы должны ссылаться на свои скрипты контроллера на вашем «main.htm», это гарантирует, что они будут загружены для использования в ng-view, для более крупных страниц вы должны ссылаться на скрипты в нижней части страницы, такие как ;

<script src="scripts/app.js"></script> 
<script src="scripts/controller"><script>

Путь к файлу относится к текущей директории проекта.

Надеюсь, это поможет!

источник

2016-11-07 16:05:52

AngularJS - HTML-страница не отображает возвращенные данные при использовании ngView

ответ

Смежные вопросы