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

问题描述 投票:1回答:1

我显示当前date.it工作正常,当我把它放在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>
angularjs date angularjs-templates
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.