angularjs - 在模板中分解我的代码后，当前日期未显示

Question

我正在显示当前日期。当我将它放在 index.html 中时，它可以正常工作。但是当我破坏组件和模板中的代码时，它不会在我的视图中显示日期。

我试图用 {{date | 日期：“EEE MMM dd yyyy”}}

在我的控制器对象范围内，我有 this.date = new Date() 这只适用于 index.html

零件

angular.
  module('cListApp').
  component('itemsList', {
    templateUrl:'items-list.template.html',
    controller: function cListController() {
      this.items = [
        {
            name: 'Nexus S',
            snippet: 'Fast just got faster with Nexus S.',
            icon: 'https://picsum.photos/100/100/?image=491',
            placeholderImage : 'https://picsum.photos/100/100/?blur',
        },
      ],
      this.date = new Date();
    }
  });

模板

<ul> 
    <li class="list-body-container" ng-repeat="item in $ctrl.items"> 
        <div class="profileImage"> 
            <img ng-src = "{{item.icon || item.placeholderImage}}"/>
        </div> 
        <div class="list-body-left"> 
            <div class="li-title"><h2>{{item.name}}</h2><h4>Title3</h4></div> 
            <div class="li-body"><p>{{item.snippet}}</p></div> 
            <div class="li-date"> 
                {{date | date:"EEE MMM dd yyyy"}}
            </div>
        </div>
    </li>
</ul>

Answer 1

我已经更新了我的代码。控制器

angular.
  module('cListApp').
  component('itemsList', {
    templateUrl:'items-list.template.html',
    controller:['$http', function cListController($http) {
        var self = this;
        self.date = new Date();
        $http.get('data/data.json').then(function(response) {
          self.items = response.data; 
        });
      }]
  });

模板

<ul> 
    <li class="list-body-container" ng-repeat="item in $ctrl.items"> 
        <div class="profileImage"> 
            <img ng-src = "{{item.icon || item.placeholderImage}}"/>
        </div> 
        <div class="list-body-left"> 
            <div class="li-title"><h2>{{item.name}}</h2><h4>Title3</h4></div> 
            <div class="li-body"><p>{{item.snippet}}</p></div> 
            <div class="li-date"> 
                {{$ctrl.date | date:"EEE MMM dd yyyy"}}
            </div>
        </div>
    </li>
</ul>