feat(customTemplates): allow a parent scope to be accessed in custom …

…templates Closes #415
mattlewis92 · Aug 10, 2016 · c84e9ab · c84e9ab · h44z · Aug 10, 2016
1 parent 28354e6
commit c84e9ab
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -210,6 +210,9 @@ $templateCache.put('my-custom-template.html', 'Custom month view template here')
 <mwl-calendar custom-template-urls="{calendarMonthView: 'my-custom-template.html'}"></mwl-calendar>
 ```
 
+### template-scope
+An object containing a set of variables that will be available in a custom template as `vm.templateScope`
+
 ## Configuring the calendar default config
 
 You can easily customise the date formats and i18n strings used throughout the calendar by using the `calendarConfig` value. Please note that these example formats are those used by moment.js and these won't work if using angular as the date formatter. Example usage:

diff --git a/src/directives/mwlCalendar.js b/src/directives/mwlCalendar.js
@@ -150,7 +150,8 @@ angular
         dayViewStart: '@',
         dayViewEnd: '@',
         dayViewSplit: '@',
-        dayViewEventChunkSize: '@'
+        dayViewEventChunkSize: '@',
+        templateScope: '=?'
       },
       controller: 'MwlCalendarCtrl as vm',
       bindToController: true

diff --git a/src/directives/mwlCalendarDay.js b/src/directives/mwlCalendarDay.js
@@ -106,7 +106,8 @@ angular
         editEventHtml: '=',
         deleteEventHtml: '=',
         customTemplateUrls: '=?',
-        cellModifier: '='
+        cellModifier: '=',
+        templateScope: '='
       },
       controller: 'MwlCalendarDayCtrl as vm',
       bindToController: true

diff --git a/src/directives/mwlCalendarHourList.js b/src/directives/mwlCalendarHourList.js
@@ -112,7 +112,8 @@ angular
         onDateRangeSelect: '=',
         onEventTimesChanged: '=',
         customTemplateUrls: '=?',
-        cellModifier: '='
+        cellModifier: '=',
+        templateScope: '='
       },
       bindToController: true
     };

diff --git a/src/directives/mwlCalendarMonth.js b/src/directives/mwlCalendarMonth.js
@@ -147,7 +147,8 @@ angular
         onTimespanClick: '=',
         cellModifier: '=',
         slideBoxDisabled: '=',
-        customTemplateUrls: '=?'
+        customTemplateUrls: '=?',
+        templateScope: '='
       },
       controller: 'MwlCalendarMonthCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

diff --git a/src/directives/mwlCalendarSlideBox.js b/src/directives/mwlCalendarSlideBox.js
@@ -40,7 +40,8 @@ angular
         deleteEventHtml: '=',
         onDeleteEventClick: '=',
         cell: '=',
-        customTemplateUrls: '=?'
+        customTemplateUrls: '=?',
+        templateScope: '='
       },
       bindToController: true
     };

diff --git a/src/directives/mwlCalendarWeek.js b/src/directives/mwlCalendarWeek.js
@@ -98,7 +98,8 @@ angular
         onTimespanClick: '=',
         onDateRangeSelect: '=',
         customTemplateUrls: '=?',
-        cellModifier: '='
+        cellModifier: '=',
+        templateScope: '='
       },
       controller: 'MwlCalendarWeekCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

diff --git a/src/directives/mwlCalendarYear.js b/src/directives/mwlCalendarYear.js
@@ -84,7 +84,8 @@ angular
         onTimespanClick: '=',
         cellModifier: '=',
         slideBoxDisabled: '=',
-        customTemplateUrls: '=?'
+        customTemplateUrls: '=?',
+        templateScope: '='
       },
       controller: 'MwlCalendarYearCtrl as vm',
       link: function(scope, element, attrs, calendarCtrl) {

diff --git a/src/templates/calendar.html b/src/templates/calendar.html
@@ -21,6 +21,7 @@
     cell-modifier="vm.cellModifier"
     slide-box-disabled="vm.slideBoxDisabled"
     custom-template-urls="vm.customTemplateUrls"
+    template-scope="vm.templateScope"
     ng-switch-when="year">
   </mwl-calendar-year>
 
@@ -39,6 +40,7 @@
     cell-modifier="vm.cellModifier"
     slide-box-disabled="vm.slideBoxDisabled"
     custom-template-urls="vm.customTemplateUrls"
+    template-scope="vm.templateScope"
     ng-switch-when="month">
   </mwl-calendar-month>
 
@@ -55,6 +57,7 @@
     on-date-range-select="vm.onDateRangeSelect"
     custom-template-urls="vm.customTemplateUrls"
     cell-modifier="vm.cellModifier"
+    template-scope="vm.templateScope"
     ng-switch-when="week">
   </mwl-calendar-week>
 
@@ -75,6 +78,7 @@
     delete-event-html="vm.deleteEventHtml"
     custom-template-urls="vm.customTemplateUrls"
     cell-modifier="vm.cellModifier"
+    template-scope="vm.templateScope"
     ng-switch-when="day">
   </mwl-calendar-day>
 </div>
diff --git a/src/templates/calendarDayView.html b/src/templates/calendarDayView.html
@@ -38,6 +38,7 @@
       on-event-times-changed="vm.onEventTimesChanged"
       view-date="vm.viewDate"
       custom-template-urls="vm.customTemplateUrls"
+      template-scope="vm.templateScope"
       cell-modifier="vm.cellModifier">
     </mwl-calendar-hour-list>
 

diff --git a/src/templates/calendarMonthView.html b/src/templates/calendarMonthView.html
@@ -30,7 +30,8 @@
       delete-event-html="vm.deleteEventHtml"
       on-delete-event-click="vm.onDeleteEventClick"
       cell="vm.view[vm.openDayIndex]"
-      custom-template-urls="vm.customTemplateUrls">
+      custom-template-urls="vm.customTemplateUrls"
+      template-scope="vm.templateScope">
     </mwl-calendar-slide-box>
 
   </div>

diff --git a/src/templates/calendarWeekView.html b/src/templates/calendarWeekView.html
@@ -40,6 +40,7 @@
       on-date-range-select="vm.onDateRangeSelect"
       custom-template-urls="vm.customTemplateUrls"
       cell-modifier="vm.cellModifier"
+      template-scope="vm.templateScope"
       ng-if="vm.showTimes">
     </mwl-calendar-hour-list>
 

diff --git a/src/templates/calendarYearView.html b/src/templates/calendarYearView.html
@@ -42,7 +42,8 @@
       delete-event-html="vm.deleteEventHtml"
       on-delete-event-click="vm.onDeleteEventClick"
       cell="vm.view[vm.openMonthIndex]"
-      custom-template-urls="vm.customTemplateUrls">
+      custom-template-urls="vm.customTemplateUrls"
+      template-scope="vm.templateScope">
     </mwl-calendar-slide-box>
 
   </div>

diff --git a/test/unit/directives/mwlCalendarMonth.spec.js b/test/unit/directives/mwlCalendarMonth.spec.js
@@ -12,6 +12,7 @@ describe('mwlCalendarMonth directive', function() {
     showModal,
     calendarHelper,
     calendarConfig,
+    $templateCache,
     template =
       '<mwl-calendar-month ' +
       'events="events" ' +
@@ -25,6 +26,8 @@ describe('mwlCalendarMonth directive', function() {
       'day-view-split="dayViewSplit || 30" ' +
       'cell-template-url="{{ monthCellTemplateUrl }}" ' +
       'cell-events-template-url="{{ monthCellEventsTemplateUrl }}" ' +
+      'template-scope="templateScope"' +
+      'custom-template-urls="customTemplateUrls"' +
       '></mwl-calendar-month>';
   var calendarDay = new Date(2015, 4, 1);
 
@@ -81,10 +84,11 @@ describe('mwlCalendarMonth directive', function() {
 
   beforeEach(angular.mock.module('mwl.calendar'));
 
-  beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarHelper_, _calendarConfig_) {
+  beforeEach(angular.mock.inject(function($compile, _$rootScope_, _calendarHelper_, _calendarConfig_, _$templateCache_) {
     $rootScope = _$rootScope_;
     calendarHelper = _calendarHelper_;
     calendarConfig = _calendarConfig_;
+    $templateCache = _$templateCache_;
     scope = $rootScope.$new();
     prepareScope(scope);
     element = angular.element(template);
@@ -282,4 +286,14 @@ describe('mwlCalendarMonth directive', function() {
     expect(MwlCalendarCtrl.dateRangeSelect).to.be.undefined;
   });
 
+  it('should pass in a scope object that is accessible from the custom template', function() {
+    scope.templateScope = {
+      foo: 'world'
+    };
+    $templateCache.put('customMonth.html', 'Hello {{ vm.templateScope.foo }}');
+    scope.customTemplateUrls = {calendarMonthView: 'customMonth.html'};
+    scope.$apply();
+    expect(element.text()).to.deep.equal('Hello world');
+  });
+
 });