Date Time Picker not working in Angular transcluded directive

[Walter]

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.

HTML:

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

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


Javascript:

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

    $scope.openPicker = function () { 
         $scope.picker.open();
     };


     $scope.openPicker2 = function () {
         $scope.picker2.open();
     };

});


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

    return {
        transclude: true,
        scope: {
            someVar: '='
        },
        restrict: 'EA',
        template: function(element, attrs) {
            var html = '<div ng-transclude></div>';
            return html;
        }
    };
});

[Atanas Korchev]

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: http://plnkr.co/edit/FkZ1FiuDLzAe67CCYHID?p=preview

The relevant code is this:

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

         $scope.openPicker2 = function (picker2) {
     picker2.open();
 };

 

Regards,
Atanas Korchev
Telerik