Question

我试图让Angular Bootstrap日历工作，我无法使Previous和Next按钮正常工作。按照说明，这是我的代码：

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-router状态和控制器：

  $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作为示例使用的范围之外，还有其他明显的东西我不知道吗？

感谢。

Answer 1

我终于完成了一切。主要问题是将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>

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

1 个答案: