我刚刚开始我的 Angular 冒险。我有一个非常简单的应用程序，它应该呈现从 Controller (Spring Boot asap 创建的应用程序)获取的 json 内容。 View 应该显示人员列表，它应该与 Controller 中提供的 json 一起工作，但是当我切换到 $http.get 时，该列表不会被渲染。
我知道 Controller 正在被要求提供数据(我有日志，并且在前端进行了调试)，它只是一个空 View ，这有点问题。我不知何故感觉它与 $scope 有关，但我太新了，无法理解出了什么问题。
这是我的代码:
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="peoplePopulator">
<head>
<link rel="stylesheet" href="bower_components/bootstrap-css-only/css/bootstrap.min.css"/>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="app/myApp.js"></script>
<script src="app/peoplePopulator.js"></script>
</head>
<body>
<people-consumer></people-consumer>
</body>
</html>
myApp.js:
var peoplePopulator = angular.module('peoplePopulator', []);
peoplePopulator.js:
angular.module('peoplePopulator').component('peopleConsumer', {
template:
'<ul>' +
'<li ng-repeat="man in $ctrl.people">' +
'<p>This is the value for id: {{man.id}}</p>' +
'<p>This is the value for name: {{man.name}}</p>' +
'<p>This is the value for surname: {{man.surname}}</p>' +
'<p>This is the value for age: {{man.age}}</p>' +
'<p>This is the value for sex: {{man.sex}}</p>' +
'</li>' +
'</ul>',
controller: function PeopleController($scope, $http) {
$http.get('http://localhost:8080/getAllPeople').
then(function(response) {
$scope.people = response.data;
});
}
});
日志:
Added: PersonDto{id=null, name='ran1.6077897002879162E308', surname='dom389401569', age=423647022, sex='F'}
Added: PersonDto{id=null, name='ran1.7927508063734304E308', surname='dom139179403', age=135916746, sex='F'}
Added: PersonDto{id=null, name='ran5.491516947272879E307', surname='dom601187307', age=1882764612, sex='F'}
Fetching records from all over the world
HHH000397: Using ASTQueryTranslatorFactory
Fetching records from all over the world <- logger in the getAllPeople controller
最佳答案
有两种创建 AngularJS 组件的替代方法:指令(较旧且具有更多功能 https://docs.angularjs.org/guide/directive )和组件(较新，指令的子集，它有助于定义合理的默认值并迁移到 Angular 2+ https://docs.angularjs.org/guide/component )。您在代码中使用了组件。这意味着默认情况下您在 View 中使用 $ctrl 进行操作。因此，您的代码应如下所示:
controller: function PeopleController($scope, $http) {
var $ctrl = this;
$http.get('http://localhost:8080/getAllPeople').
then(function(response) {
$ctrl.people = response.data;
});
}
关于javascript - 元素未在 Angular 中渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45662744/