Angularjs v1 Kendo UI DOM element access with $scope when there is a ng-switch-when

Question

With Kendo UI component in Angularjs, for example:

<input kendo-date-picker="myDatePicker"
       ng-model="dateString"
       k-ng-model="dateObject"
       style="width: 100%;" />

I am able to access the date picker in javascript with the variable $scope.myDatePicker

Now, the problem is, this date-picker comes with a wrapper with the tag ng-switch-when.

<div ng-switch="userSelection.code">
   <div ng-switch-when="JUST_DEMO">
      <input kendo-date-picker="myDatePicker"
         ng-model="dateString"
         k-ng-model="dateObject"
         style="width: 100%;" />
   </div>
</div>

With this, in the javascript, the variable $scope.myDatePicker becomes 'undefined', even though after the flag JUST_DEMO is turned on subsequently.

So my question is, how to fix this? I need to access $scope.myDatePicker in javascript to manually open the datepicker in the code.

P.S.:

I think I found a working approach: using $compile in the databound event.

Answer 1

i don't see any code for ng-switch , not sure if it's there in your tag :

<div ng-switch="myVar">

ng-switch is evaluated against myVar variable in abve code snippet.

I suggest you use ng-switch as follows :

declare a scope variable with some sort of flag to base your ng-switch on

$scope.datePickerParent = {};// some object
datePickerParent .JUST_DEMO = true/false;
datePickerParent.myDatePicker = ''; //assign some value
<td ng-switch on="datePickerParent.showNgSwitch"> 

    <div ng-switch-when="datePickerParent.JUST_DEMO">
   <input kendo-date-picker="datePickerParent.myDatePicker"
       ng-model="dateString"
       k-ng-model="dateObject"
       style="width: 100%;" />
   </div>
   </td>

Also have a look at this SO post

Also try to use $parent to access scope variable, ng-switch creates it's own scope

Answer 2

I found the solution:

<div ng-switch="userSelection.code">
   <div ng-switch-when="JUST_DEMO">
      <input kendo-date-picker="myKendo.myDatePicker"
         ng-model="dateString"
         k-ng-model="dateObject"
         style="width: 100%;" />
   </div>
</div>

instead of using the normal "myDatePicker" variable, wrap it in another object, such as myKendo.

So, in javascript, this can be accessed with $scope.myKendo.myDatePicker.