上一個按鈕和下一個按鈕不適用於Angular Bootstrap日曆

Question

我在嘗試讓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之外，還有其他的東西顯而易見我很想念G？

謝謝。

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>