angular.element().scope() return undefined in KendowWindow

[Jeffrey]

I reproduce my question in this demo: http://jsbin.com/yoxepe/edit?html,console,output

The <span ng-bind="text"> inside KendoWindow is bound to main scope's text property.  We can change <input ng-model="text"> and see the text of button changing too.  I use these code to get the scopes behind both <span> and <input>, but the scope() result of span inside KendowWindow return undefined.  

$scope.test = function() {
    console.log('angular.element("#spnBtnText").length=' + angular.element("#btnTest").length);
    console.log(angular.element("#spnBtnText").scope());
    console.log('angular.element("#txtTest").length=' + angular.element("#spnTest").length);
    console.log(angular.element("#txtTest").scope());
};

 

result:

"angular.element(\"#spnBtnText\").length=1"
undefined
"angular.element(\"#txtTest\").length=0"
[object Object] {
  $$applyAsyncQueue: [],
  $$asyncQueue: [],
  $$childHead: null ....

 

Why angular.element().scope() doesn't work inside KendoWindow?

[Alex Hajigeorgieva]

Hello Jeffrey,

Please accept my apology for the delay in responding and thank you very much for the provided demo.

Note that when the Kendo UI Window is initialized, it becomes a child of the body thus "leaving" the AngularJS application. As a result, the scope() method returns undefined. The specifics of the HTML structure is outlined here:

http://docs.telerik.com/kendo-ui/controls/layout/window/overview#html-structure-and-dom-placement

There are a few different ways to get the scope of elements which are children of the Kendo UI Window.

1) Initialize the app on the body

Runnable demo: http://dojo.telerik.com/aFeXe 

2) Use the  appendTo option to append the window to another HTML element which is part of the angular application and scope:

http://docs.telerik.com/kendo-ui/api/javascript/ui/window#configuration-appendTo
Runnable demo: http://dojo.telerik.com/unohA

3) Access the scope through the window scope as shown in this documentation article:

http://docs.telerik.com/kendo-ui/AngularJS/introduction#widgets-placed-in-window

I hope this helps.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Jeffrey]

Thanks for your friendly and complete explanation.  The option 3 works for me.

[Jeffrey]

Just found something unexpected.  I tested the example "Get AngularJS Scope Attached to Pop-Up Window" form http://docs.telerik.com/kendo-ui/AngularJS/introduction#widgets-placed-in-window, add alert(childScope) and get undefined.

angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
  $scope.$on("kendoRendered", function(e) {
    //retrieve the child scope from the window element
    var childScope = angular.element($scope.wnd.element).scope();
    alert(childScope); //childScope is undefined
  });

Did I miss anything?

[Alex Hajigeorgieva]

Hi Jeffrey,

Thank you very much for pointing this out and please accept my apology for the confusion.

I have now updated the documentation to reflect that there are two options to get the scope itself:

https://github.com/telerik/kendo-ui-core/commit/dd9331eba8cabf0df17379de8784904f2305bd0f

Despite the fact that the ng-model binding seems to work correctly, I would recommend using either of the aforementioned approaches:

http://dojo.telerik.com/iGAGe 

As a token of appreciation, I have updated your Telerik points. Thank you for helping us improve.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Jeffrey]

Hi Alex, 

k-append-to trick works well and here's the revised version of my demo. Thanks a lot.

Regards,
Jeffrey