將角度日曆集成到離子無限滾動中

我對Angular來說已經夠新的了。我正在嘗試將angular-bootstrap日曆集成到離子應用程序中。將角度日曆集成到離子無限滾動中

https://github.com/mattlewis92/angular-bootstrap-calendar

我使用，但使用的按鈕遞增到下週的「周」視圖：

<button class="button ng-model="next" ion-chevron-right btn btn-primary" 
    mwl-date-modifier 
    date="calendarDay" 
    increment="calendarView"> 
</button>

我試圖把它變成用離子水平滾動條無限滾動。所以如果有人滾動水平，當它到達第7天時，就像上面的下一個按鈕那樣增加到下一週。我一直在努力爭取一段時間，並想知道如果沒有大量的工作真的可以做到。以下是我的標記：

<ion-infinite-scroll direction="y" locking="false" class="calendarContainer" on-infinite="loadMoreDates()"> 

<mwl-calendar view="calendarView" 
    current-day="calendarDay" 
    events="events" 
    view-title="calendarTitle"> 
</mwl-calendar> 

    </ion-infinite-scroll>

而且我的控制器，這顯然是錯誤的 - 已經我剛纔試了很多東西：

myApp.controller('calendarController', function($scope, $rootScope){ 
    $scope.calendarView = 'week'; 
    $scope.calendarDay = new Date(); 
    $scope.calendarTitle = 'Hello'; 

$scope.loadMoreDates = function(){ 
    $scope.next = moment($scope.date).add(1, $scope.increment).toDate(); 
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
}

我可以看到下面的指令，用於遞增天。想知道是否可以從我的控制器調用這個指令的增量部分？

.directive('mwlDateModifier', function() { 

return { 
    restrict: 'A', 
    controller: function($element, $attrs, $scope, moment) { 

    function onClick() { 
     if (angular.isDefined($attrs.setToToday)) { 
     $scope.date = new Date(); 
     } else if (angular.isDefined($attrs.increment)) { 
     $scope.date = moment($scope.date).add(1, $scope.increment).toDate(); 
     } else if (angular.isDefined($attrs.decrement)) { 
     $scope.date = moment($scope.date).subtract(1, $scope.decrement).toDate(); 
     } 
     $scope.$apply(); 
    } 

    $element.bind('click', onClick); 

    $scope.$on('$destroy', function() { 
     $element.unbind('click', onClick); 
    }); 

    }, 
    scope: { 
    date: '=', 
    increment: '=', 
    decrement: '=' 
    } 
}; 

});

我一直在這爭奪一段時間，我不希望有人來幫我這個忙，如果有人可以讓我知道，如果我這樣做完全錯了，或者如果它需要大量的工作？或者，如果有人能夠指出我的方向是正確的，那將會很棒？

來源

2015-06-14 Lorna Kelly

這段代碼不應該工作B/C你沒有$scope.date和$scope.increment任何地方聲明並連接到日曆視圖，對吧？它看起來像是連接到指令的變量，並且在指令內有作用域，所以如果沒有在控制器中實現它們，它們將不起作用。

$scope.loadMoreDates = function(){ 
     $scope.next = moment($scope.date).add(1, $scope.increment).toDate(); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
    }

我想應該是這樣的

$scope.loadMoreDates = function(){ 
     //increment calendarDay by 1 week 
     $scope.calendarDay = moment($scope.calendarDay).add(7, 'days').toDate(); 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
    }

來源

2015-06-15 00:09:45 Travis

將角度日曆集成到離子無限滾動中

回答

相關問題