元素沒有在角度呈現

我剛剛開始我的角度冒險。我有非常簡單的應用程序，它應該呈現從控制器（Spring Boot asap創建的應用程序）獲取的json的內容。視圖應該顯示人員列表，它與控制器中提供的json應該一樣，但是當我切換到$ http.get時，列表不會呈現。元素沒有在角度呈現

我知道控制器正在被要求輸入數據（我有日誌，並且在前端進行了調試），它只是一個空視圖，這有點問題。我總覺得它與$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

來源

2017-08-13 iie

Threre're兩種可供選擇的方法來創建angularjs組件：指令（老年人和有更多的功能https://docs.angularjs.org/guide/directive）和組件（新的，指令的一個子集，它有助於確定理智的默認值並遷移到Angular 2+ https://docs.angularjs.org/guide/component）。您在代碼中使用了組件。這意味着您在默認情況下在視圖中使用$ ctrl進行操作。因此，您的代碼應如下所示：

controller: function PeopleController($scope, $http) { 
    var $ctrl = this; 
    $http.get('http://localhost:8080/getAllPeople'). 
      then(function(response) { 
       $ctrl.people = response.data; 
      }); 
}

來源

2017-08-13 17:43:41

元素沒有在角度呈現

回答

相關問題