CODEWITHSUNDEEP
angularjskendo-ui
ps0604
ps0604

Reputation: 1071

KendoUI not working in AngularJS directive with transclude = true

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

Upvotes: 1

Views: 610

Answers (1)

Walter Brand
Walter Brand

Reputation: 689

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

Upvotes: 1

Related Questions