上一个和下一个按钮不适用于Angular Bootstrap日历

奇迹95

我正在尝试使Angular Bootstrap日历正常工作,但无法使“上一步”和“下一个”按钮正常工作。按照说明进行操作,这是我要编写的代码:

calendarControls.js

<div class="row">
  <div class="col-md-6 text-center">
    <div class="btn-group">
      <button
        class="btn btn-primary"
        mwl-date-modifier
        date="viewDate"
        decrement="calendarView">
        Previous
      </button>
      <button
        class="btn btn-default"
        mwl-date-modifier
        date="viewDate"
        set-to-today>
        Today
      </button>
      <button
        class="btn btn-primary"
        mwl-date-modifier
        date="viewDate"
        increment="calendarView">
        Next
      </button>
    </div>
  </div>
</div>

页面模板:

<ng-include src="'views/calendar/calendarControls.html'"></ng-include>
<mwl-calendar
  view="calendarView"
  view-date="calendarDate"
  events="events"
  view-title="calendarTitle"
  cell-is-open="true">
</mwl-calendar>

我的ui路由器状态和控制器:

  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'views/home.html'
    })
    .state ('calendar', {
      url : '/calendar',
      templateUrl: 'views/calendar/index.html',
      controller: function ($scope, $state,moment, calendarConfig) {

        // Calendar configs
        $scope.calendarView = 'month';
        $scope.calendarDate = new Date();
        $scope.calendarTitle = 'My Title';

        $scope.events = [];
        $scope.viewDate = moment().startOf('month').toDate();

        calendarConfig.dateFormatter = 'moment';
        calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';

        $scope.$on('$destroy', function() {
          calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
        });
      },
    });

除了不像示例所使用的那样将vm用于范围之外,我还缺少其他明显的东西吗?

谢谢。

奇迹95

我终于一切都可以工作了。主要问题是将controllerAs项添加到我的状态定义中:

    .state ('calendar', {
      url : '/calendar',
      templateUrl: 'views/calendar/index.html',
      controller: 'calendarController',
      controllerAs: 'vm'
    });

我还创建了一个单独的控制器:

(function() {
  angular.module('myApp')
    .controller('calendarController', function($scope, moment, calendarConfig) {

    var vm = this;

    calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';

    vm.events = [];
    vm.calendarView = 'month';
    vm.viewDate = moment().startOf('month').toDate();

    $scope.$on('$destroy', function() {
      calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
    });
  })
})();

然后将指令设置与控制器中的值进行匹配:

<div class="row">
  <div class="col-md-6 text-center">
    <div class="btn-group">
      <button
        class="btn btn-primary"
        mwl-date-modifier
        date="vm.viewDate"
        decrement="vm.calendarView">
        Previous
      </button>
      <button
        class="btn btn-default"
        mwl-date-modifier
        date="vm.viewDate"
        set-to-today>
        Today
      </button>
      <button
        class="btn btn-primary"
        mwl-date-modifier
        date="vm.viewDate"
        increment="vm.calendarView">
        Next
      </button>
    </div>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Bootstrap轮播的下一个/上一个单击上加载JSP页面

jQuery:.dialog()不适用于.classe选择器的下一个元素

添加按钮行不适用于下一个按钮

具有上一个和下一个按钮的Bootstrap 4选项卡

完整日历-单击上一个或下一个按钮后如何获得年份和月份?

下一个上一个Bootstrap选项卡

在执行下一个功能之前,如何等待Angular Bootstrap模态窗口的响应?

如何使用上一个和下一个按钮遍历带有嵌套下拉菜单的Bootstrap选项卡式导航菜单?

单击Bootstrap 4 Carousel的下一个按钮时,第一个幻灯片计数不起作用

如何在Bootstrap日期选择器中获取下个月而不是下一个上一个图标?

下一个和上一个按钮不适用于多个日历

全日历多个日历,如何单击所有日历的上一个/下一个

上一个/下一个链接不适用于模型中的第一条记录和最后一条记录(导轨)

在打开下一个抽屉之前先关闭上一个抽屉-Twitter bootstrap 3

下一个查询参数不适用于django allauth用于Facebook登录

全日历视图显示goToDate打破上一个,下一个和今天

jQuery最近的()不适用于层次结构中的下一个元素

为什么当我单击下一个或上一个时,完整的日历jquery插件无法按预期工作?

日历输入忽略下一个输入行

Bootstrap轮播上一个/下一个按钮无响应

如何通过Codeigniter日历库填充当前月空白单元格中的上一个和下一个月天

计算上一个日历周期

单击按钮是否显示下一个选项卡窗格(最新的Bootstrap 3.3.6)?

Bootstrap Tabpanel下一个上一个按钮

jQuery,Bootstrap导航-如何添加上一个/下一个按钮?

代号下一个/上一个月份的日历事件

模式中的上一个和下一个数据切换仅适用于已分页的照片

jQuery上一个/下一个导航,带有用于自定义日历的显示/隐藏内容

jQuery UI Datepicker,从一个日历移动到下一个日历?