首先是我的档案:
app.js
var app = angular.module("CODETEST", ['ngRoute']);
// Routing Configuration
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
controller: 'HomeController',
templateUrl: 'index.php'
})
.otherwise({
redirectTo: '/'
});
});
people.js
app.factory('users', ['$http', function($http) {
function callExternalJson() {
return $http.get('js/services/testperson.json')
}
return callExternalJson;
}]);
HomeController.js
app.controller('HomeController', ['$scope', '$rootScope', 'users', function($scope, $rootScope, users ) {
users.success(function(data){
$scope.users = data.person;
});
}]);
这是问题所在。
这只是一个测试JSON文件来实现这一点,但是我将要检索的实际JSON文件会在每次点击时动态重新生成,这就是为什么我people.js
设置这种方式因为我正在点击无限循环。昨晚有人帮助了我。
但是,我还有两个问题: 1)如何在控制器中提取数据,以便在页面中使用它?
2)get in people.js
返回一个空结构。我确定文件在那里,但它没有得到任何数据。
思想?
答案 0 :(得分:1)
将您的工厂代码更改为以下内容,
app.factory('users', ['$http', function($http) {
return {
// you can add multiple functions separating them with comma and access them in your controller
callExternalJson: function() {
return $http.get('js/services/testperson.json').then(function (response) {
return response;
});
}
}
}]);
在你的控制器中,
app.controller('HomeController', ['$scope', '$rootScope', 'users', function ($scope, $rootScope, users ) {
users.callExternalJson()
.then(function (response) {
$scope.users = response.data;
});
}]);
答案 1 :(得分:1)
尝试从index.php
删除templateUrl
。
templateUrl
应包含您的路线的特定HTML,而不是整个HTML页面。现在,ng-view
正在填充整个页面,这会变得混乱。
如果我查看您网页的来源,您根本不需要templateUrl,以便您的应用按预期工作。
答案 2 :(得分:0)
你可以尝试:
users().then(function(response){
$scope.users = response.data.person;
});
答案 3 :(得分:0)
我不确定如何做到这一点,但我想将你们两个标记为正确答案。来自@Chinni的整体代码就是答案,@ Prashant-palikhe的templateUrl解决了循环。
谢谢!