Question

我对Angular足够新。我正在尝试将angular-bootstrap-calendar集成到离子应用程序中。

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: '='
  }
};

 });

我一直在与这个争斗一段时间，我不期待有人为我做这件事，如果有人能让我知道我是完全错了还是需要做很多工作？或者，如果有人能指出我正确的方向，那会很棒吗？

Answer 1

这段代码永远不会工作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');
    }

将角度日历集成到离子无限滚动中

1 个答案: