Angular Bootstrap Calendarで前と次のボタンは機能しません

Question

Angular Bootstrap Calendarを動作させようとしていますが、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-ルータの状態とコントローラ：

$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>