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.

    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;
            }
        };
    });
  2. Answer
    Atanas Korchev
    Admin
    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: 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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top