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

Я новичок в AngularJS.

У меня есть php-сервер с базой данных sql, и у меня есть html-страница с AngularJS и кнопка, которая отправляет на сервер запрос $http get, который возвращает массив данных, отображаемый в таблице на той же странице.

Всякий раз, когда я открываю страницу напрямую имя_сайта/myList.htm и нажимаю getList, данные отображаются без проблем, но как только я открываю страницу через маршрутизацию, ngView, элементы страницы появляются, но если я нажимаю кнопку, страница не обновляется данными с сервера.

Нужен ли дополнительный канал передачи данных между двумя страницами?

мой список.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>

Спасибо.


php get angularjs ng-view
person yabawi    schedule 07.11.2016    source источник
comment
покажи нам код   -  person Sa E Chowdary    schedule 07.11.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно одно и то же имя .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>

Путь к файлу соответствует текущему каталогу проекта.

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

person Tom Johnson    schedule 07.11.2016