KendoUI无法在Transclude = true的AngularJS指令中使用

Question

In this example, 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.

My understanding is that the scope of the transcluded portion inherits from the control scope, so this should work. Where am I wrong?

This is the 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>

Javascript

var app = angular.module("app", [ "kendo.directives" ]);

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;
      }
    };
});

Answer 1

There are two things about your code:

first: you create an isolatedScope so you do not have access to the controller scope inside the directive scope.

second: transcluded content get their own scope. One way to work around this is by not using transclude at all, like the example below:

return {
  transclude: false,
  restrict: 'EA',
      template: function(element, attrs) {
        var html = '<div>'+element.html()+'</div>';
        return html;
}

or use the link function and manually transclude the element with the scope of the directive