Date Time Picker not working in Angular transcluded directive

2 posts, 1 answers
  1. Walter
    Walter avatar
    7 posts
    Member since:
    Mar 2015

    Posted 22 Mar 2015 Link to this post

    In the code below I have two AngularJS KendoDatePickers. The first one works perfectly, if you click on the button you open the calendar. The second one is within a directive that has the transclude attribute set to true. If you click on the second button, you get an error.

    You can see the working example in this plunk.


    <input kendo-date-picker="picker" />
    <button ng-click="openPicker()">Open Date Picker</button>

         <input kendo-date-picker="picker2" />
        <button ng-click="openPicker2()">Open Date Picker 2</button>
    </my-window>Javascriptvar app = angular.module("app", [ "kendo.directives" ]);


        app.controller('MyCtrl', function($scope) {

        $scope.openPicker = function () { 

         $scope.openPicker2 = function () {


    app.directive('myWindow', function() {

        return {
            transclude: true,
            scope: {
                someVar: '='
            restrict: 'EA',
            template: function(element, attrs) {
                var html = '<div ng-transclude></div>';
                return html;
  2. Answer
    Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 25 Mar 2015 Link to this post

    Hello Walter,

    Indeed the transclusion creates a child scope where the second datepicker resides. You can't access that scope from the parent though. Here is a possible way to get the datepicker instance:

    The relevant code is this:

            <button ng-click="openPicker2(picker2)">Open Date Picker 2</button>

             $scope.openPicker2 = function (picker2) {;


    Atanas Korchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top