AngularJS - 使用 ngView 时 HTML 页面不显示返回的数据答案

【问题标题】：AngularJS - HTML page does not show returned data when using ngViewAngularJS - 使用 ngView 时 HTML 页面不显示返回的数据
【发布时间】：2016-11-07 13:06:41
【问题描述】：

我是 AngularJS 的新手。

我有一个带有 sql 数据库的 php 服务器，我有一个带有 AngularJS 的 html 页面和一个向服务器发送 $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>

谢谢。

【问题讨论】：

给我们看一些代码

标签： php angularjs get ng-view

【解决方案1】：

您的控制器和 app.js 需要相同的 .module 名称，例如；

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

你的不能通过 ng-route 工作的原因是因为你在第一个实例上加载“myApp”，然后使用你的 ng-view 加载可以工作的 HTML 页面，但是因为你的模块没有添加作为对您的控制器的依赖，它不会加载控制器，因为它正在明确寻找使用“myApp”的控制器，它通过直接路由加载，因为您从未告诉它明确使用“myApp”。

你还需要 #/list 作为你的 href 标签。

您还只需为 index.html 引用一次 Angular 脚本，因为它适用于整个应用程序，因为当您加载“myList.htm”时，您将在 ng- 中加载这些脚本的副本查看标签。如果首先加载“main.htm”而不是默认的“index.html”，则此方法有效，即使直接转到 localhost:portnum/#/list，您的路由也可以正常工作。

您还应该在“main.htm”上引用您的控制器脚本，这样可以确保它们被加载以在 ng-view 中使用，对于较大的页面，您可以引用页面底部的脚本，例如；

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

文件路径与当前项目目录相关。

希望对你有帮助！

【讨论】：