我学习角度。在过去的几个小时里,即使请求似乎成功,我的页面仍然没有显示任何内容。
有问题的组件:
// Register `eventsQc` component, along with its associated controller and template
angular.
module("eventsQc").
component("listeEvenements", {
templateUrl: "appli/liste-events/template-liste-evenements.html",
controller: function evenementsQuebecController($http) {
var self = this;
self.orderProp = 'DT01';
$http.get("/appli/data/evenements-source.json").then(function(reponse) {
for (i = 0; i < reponse.data.evenements.evenement.length; i++) {
self.evenements = reponse.data.evenements.evenement[i];
}
});
}
});
用于显示输出的html
<ul>
<li ng-repeat="evenement in $ctrl.evenements">
<div>ID- {{evenement.MUNID}}</div>
</li>
</ul>
最后是index.html页面的代码。您将看到已创建组件。
<!doctype html>
<html lang="en" ng-app="eventsQc">
<head>
<meta charset="utf-8">
<title>Quoi faire à Québec</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<liste-evenements></liste-evenements>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="appli/app.js"></script>
<script src="appli/liste-events/liste-events-component.js"></script>
</body>
</html>
我检查了所有内容,但即使ng-inspector显示$ http调用的结果,页面上也没有显示任何内容。我只是不断得到同样的信息:
答案 0 :(得分:1)
示例组件
var app = angular.module('eventsQc');
app.component(
'listeEvenements',
{
templateUrl : 'appli/liste-events/template-liste-evenements.html',
controller : function ($http,$scope) {
$scope.Register = function () {
var req = {
method: 'GET',
url: '/appli/data/evenements-source.json',
data: { }
};
$http(req).then(
function(response){
console.log(req);
console.log(response);
$scope.evenements= response.data.data;
}, function (error) {
console.log(error.data);
});
}
}
});
html(摆脱$)
<ul>
<li ng-repeat="evenement in evenements">
<div>ID- {{evenement.MUNID}}</div>
</li>
</ul>
<button ng-click="Register()">REGISTER</button>
忘记在(app.js)
中定义模块var app = angular.module('eventsQc', []);