前一个和下一个按钮将不能与角引导日历一起工作
前一个和下一个按钮将不能与角引导日历一起工作
提问于 2016-06-14 05:35:25
我试图使角引导日历工作，但我无法使前两个按钮和下一个按钮工作。按照说明，下面是代码的内容：
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之外，还有其他明显的遗漏吗？
谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-06-15 04:39:32
我终于把一切都做好了。主要问题是在我的状态定义中添加控制员was项：
.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37803701
复制相关文章
相似问题
腾讯云开发者
