2017-08-13 11 views
0

私はちょうど角を描いて冒険を始めました。私は、コントローラから取得したjsonのコンテンツを提示するはずの非常に簡単なアプリケーションを持っています(Spring Bootはappを作成した)。 Viewは人のリストを表示することになっています。これはコントローラー内で提供されている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 

答えて

1

Threre're二つの代替angularjsコンポーネントを作成する方法:ディレクティブ(古いとより多くの機能https://docs.angularjs.org/guide/directiveあり)成分を(新しいは、ディレクティブのサブセットは、それが定義するのに役立ちますデフォルトのままにし、角度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; 
      }); 
} 
関連する問題