我只想向下滚动,然后回到列表的开头。现在我不能使用我的网格。我知道有数以千计的关于如何做 ui-scroll 的例子,但是没有任何关于 Angular 1.5 组件的例子
请帮忙。
索引.html
//add ui-scroll-viewport
<md-content flex layout-padding class="viewport" id="viewport-serviceDatasource" ui-scroll-viewport>
// added ui-scroll, this part is responsible for loading by week
<div layout="raw" layout-xs="column" class="week" layout-sm="column" layout-align="space-between start" flex="none"
ui-scroll="week in $ctrl.grid">
<!-- outlines days -->
<div flex="none" layout="column" layout-fill ng-repeat="day in week">
<!-- current day header-->
<div layout="row" layout-align="space-between center" flex-gt-sm="none" flex="none" style="height: 30px">
<div flex="none" class="md-body-1" style="min-width: 24px">{{::day.title}}</div>
</div>
</div>
</div>
</md-content>
应用程序.js
class CalendarCtrl {
constructor($log, $q, $timeout, $scope) {
'ngInject';
this._$log = $log;
this._$q = $q;
this._$timeout = $timeout;
this._$scope = $scope;
this.grid = {};
// Tried to use $Scope
this._$scope.grid = {};
}
$onInit() {
// Get the first day of the week curry
let currDay = moment().weekday(0),
startDay = moment(currDay).add(-5,'w'),
endDay = moment(currDay).add(5,'w');
// Error here. I think so
this.getCalendarGrid(startDay, endDay).then(
(success) => {
// Get all our days, in the form of a grid
var result = success;
var grid = {};
grid.get = (index, count, success) =>{
index = index <= 0 ? index + 1 : index -1;
success(result.slice(index, index + count));
};
this.grid = grid;
this._$log.debug('Calendar: getCalendarGrid', this.grid);
},
(error) => this._$log.debug('Calendar: onInit, getCalendar error', error),
(week) => this._$log.debug('Calendar: onInit, getCalendar notify', week)
);
}
/**
*
* @returns {Promisse}
*/
getCalendarGrid(startDay, endDay){
let start = startDay, end = endDay;
let result = this._$q.defer(),
grid = {},
index = 0,
diff = end.diff(start,'d'),
day = {
title: null,
activity: []
},
week = {};
while (diff != 0){
// go through all the days.
day.title = start.format('DD');
angular.extend(week, {[start.format('YYYYMMDD')]: day});
day = {
title: null,
activity: []
};
// put by week
if ((diff % 7 == 1) || diff == 0){
week = { [start.format('YYYYWW')]: week };
angular.extend(grid,week);
result.notify(week);
week = {};
}
start.add(1,'d');
diff = end.diff(start,'d');
}
result.resolve(grid);
return result.promise;
}
}