Open kendo window dynamically from angular

[Thomas]

I'm trying to open a kendo window dynamically from angular. By dynamically, I mean adding a <div kendo-window...> to the html from an angular function and then opening the window. The function looks like this

$scope.showCalendar = function() {
   var element = "<div kendo-window='calendar' k-visible='false'> <div kendo-calendar></div> </div>";
   $("#calendarDiv").append(element);
   $scope.calendar.open();
};

The window does not appear. If I include this <div> directly inside the html, then the function call $scope.calendar.open() works okay, of course.

I want to do it this way, because I want to open a varying number of windows (the calendar inside the window is just for experiment; I will replace it with my custom content). This actually leads to another, more general question. I can keep track of unique window identifiers like 'win1', 'win2', and so forth, but how do you the function call dynamic? I need to somehow make this static code $scope.calendar.open() to $scope.win1.open(), $scope.win2.open() and so forth. JavaScript has some kind of eval function? (I'm a JavaScript newbie.)

 Thank you for your help.

[Petyo]

Hello Thomas,

 

appending the DOM to the container won't instantiate the directives, you need to do some additional scope.compile calls. Given that you determine your JavaScript skill as novice, I can't recommend that approach, as it is fairly advanced one. Notice that this is not Kendo UI specific - same thing won't work with any angular directive (you may use ng-repeat to verify that). 

 

If you have the time, I would strongly recommend that you reconsider your approach. Having such DOM insertions in AngularJS is not pretty and violates the framework architecture intentions. 

 

Regards,
Petyo
Telerik