0

我只想向下滚动，然后回到列表的开头。现在我不能使用我的网格。我知道有数以千计的关于如何做 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;
    }


}

控制台屏幕

控制台屏幕

有错误的控制台屏幕

有错误的控制台屏幕

4

0 回答 0