From 6e62fbee63e4615aecbfeef9b5f496c2ef1cda90 Mon Sep 17 00:00:00 2001 From: joona Date: Thu, 2 Oct 2014 21:27:45 +0300 Subject: [PATCH 1/2] Added support for custom input template and custom picker template --- src/angular-date-range-picker.coffee | 57 ++++++++++++++++++++-------- test/index.html | 18 +++++++++ 2 files changed, 60 insertions(+), 15 deletions(-) diff --git a/src/angular-date-range-picker.coffee b/src/angular-date-range-picker.coffee index 88ed1d1..03154d1 100644 --- a/src/angular-date-range-picker.coffee +++ b/src/angular-date-range-picker.coffee @@ -1,6 +1,7 @@ angular.module "dateRangePicker", ['pasvaz.bindonce'] -angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", "$timeout", ($compile, $timeout) -> +angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", "$timeout", '$http', '$templateCache', '$q', ($compile, $timeout, $http, $templateCache, $q) -> + # constants pickerTemplate = """
@@ -40,11 +41,7 @@ angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", "$ti
""" - CUSTOM = "CUSTOM" - - restrict: "AE" - replace: true - template: """ + inputTemplate = """ {{ model.start.format("ll") }} - {{ model.end.format("ll") }} @@ -56,14 +53,53 @@ angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", "$ti """ + CUSTOM = "CUSTOM" + + getTemplate = (templateUrl) -> + templateLoader = $q.defer() + if templateUrl + $http.get(templateUrl, {cache: $templateCache}) + .success (response) -> + templateLoader.resolve(response) + .error (response) -> + templateLoader.reject(response) + new Error "Could not load angular-date-range-picker template, reason #{response}" + else + templateLoader.resolve(inputTemplate) + + return templateLoader.promise + + restrict: "AE" + replace: true + scope: model: "=ngModel" # can't use ngModelController, we need isolated scope customSelectOptions: "=" ranged: "=" pastDates: "@" callback: "&" + pickerTemplateUrl: "=" + inputTemplateUrl: "=" link: ($scope, element, attrs) -> + getTemplate($scope.inputTemplateUrl).then (html) -> + newEl = $compile(html)($scope); + element.replaceWith(newEl); + element = angular.element(newEl) + # create DOM and bind event + if $scope.pickerTemplateUrl + domEl = $compile(angular.element('
'))($scope) + else + domEl = $compile(angular.element(pickerTemplate))($scope) + + element.append(domEl) + + # Any binding to element needs to be done here + element.bind "click", (e) -> + e?.stopPropagation?() + $scope.$apply -> + if $scope.visible then $scope.hide() else $scope.show() + $scope.quickListDefinitions = $scope.customSelectOptions $scope.quickListDefinitions ?= [ { @@ -259,15 +295,6 @@ angular.module("dateRangePicker").directive "dateRangePicker", ["$compile", "$ti return unless customSelectOptions? $scope.quickListDefinitions = value - # create DOM and bind event - domEl = $compile(angular.element(pickerTemplate))($scope) - element.append(domEl) - - element.bind "click", (e) -> - e?.stopPropagation?() - $scope.$apply -> - if $scope.visible then $scope.hide() else $scope.show() - documentClickFn = (e) -> $scope.$apply -> $scope.hide() true diff --git a/test/index.html b/test/index.html index 3d9d4bb..020655d 100644 --- a/test/index.html +++ b/test/index.html @@ -22,6 +22,11 @@ $scope.date = null }) + angular.module("testapp").run(function($templateCache){ + $templateCache.put('custom_picker.html', '
Greetings from custom picker template
'); + $templateCache.put('custom_input.html', 'Custom picker {{ model.start.format("ll") }} - {{ model.end.format("ll") }}'); + + });