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.~~

Ankit · Answer 1 · 2017-08-28T06:01:10.927

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

edited Aug 28 '17 at 06:01

answered Aug 28 '17 at 05:37

Ankit

5,733
2
22
23

Sorry, my mistake that overlooks the ng-switch (just edited). But i think the problem is, at first, since the ng-switch-when condition isn't fulfilled, so the html isn't created on loaded. And for some reason, although it is fulfilled afterwards, the $scope variable is still undefined.... – zeroflaw Aug 28 '17 at 05:47
what i meant to convey in my response is may be ng-switch-when can't directly access JUST_DEMO IMHO , it has to be via ng-switch variable i.e. userSelection.JUST_DEMO as referred in linked post – Ankit Aug 28 '17 at 05:50
hm...understand your words now. But I am afraid this may not be the cause. As I do see the kendo-date-picker being rendered on the page. Just that, I couldn't access it with the $scope variable... – zeroflaw Aug 28 '17 at 05:55
try to use `$parent` to access scope variable, `ng-switch` creates it's own scope – Ankit Aug 28 '17 at 06:01
did you find a solution ? – Ankit Aug 28 '17 at 06:32
nope. But thanks for your words "ng-switch creates its's own scope". I am looking from this direction... – zeroflaw Aug 28 '17 at 06:34

score 0 · Answer 2 · answered Aug 28 '17 at 09:55

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.

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

2 Answers2