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

6 posts, 0 answers
  1. Jeffrey
    Jeffrey avatar
    19 posts
    Member since:
    Dec 2010

    Posted 24 Jan Link to this post

    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?

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    298 posts

    Posted 26 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jeffrey
    Jeffrey avatar
    19 posts
    Member since:
    Dec 2010

    Posted 01 Feb in reply to Alex Hajigeorgieva Link to this post

    Thanks for your friendly and complete explanation.  The option 3 works for me.
  4. Jeffrey
    Jeffrey avatar
    19 posts
    Member since:
    Dec 2010

    Posted 01 Feb in reply to Alex Hajigeorgieva Link to this post

    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?

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    298 posts

    Posted 03 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Jeffrey
    Jeffrey avatar
    19 posts
    Member since:
    Dec 2010

    Posted 03 Feb in reply to Alex Hajigeorgieva Link to this post

    Hi Alex, 

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

    Regards,
    Jeffrey

Back to Top