我显示当前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>
我已经更新了我的代码。调节器
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>