directive wrapping kendo window cannot access to controller scope #314

jaybe78 · 2014-05-10T19:06:21Z

I have a directive which wraps a kendo window, and I'd like to set title and content
from variables stored in my controller.
However, It seems the modal doesn't have access to my controller's scope,.

I have also noticed that if I change the title of the popup from my controller, it doesn't change in the popup itself. Apparently the variable is not bound to the popup.

Please have a look
http://plnkr.co/edit/Q9xtMusidLdBctpafHak?p=preview

chrisie · 2014-05-11T08:27:56Z

I've had the same problem in the past and as I understand it the problem is that Kendo appends the window at the end of the <body>, regardless of where you have put the <div> containing the window content, and therefore the window does not share the same scope as the rest of your page. I guess it's just the way Kendo works and not an angular-kendo issue. What I've done is create a service to hold all properties of the window that should be shared between controllers (ex. window title) and use it for the communication between the window controller and the controller of the rest of the page.

mishoo · 2014-05-11T09:04:26Z

@jaybe78 Again, a few problems with your code:

of course, there is no global variable toto. You need to write $scope.toto in order to access the Widget.
our directive creates an isolated scope, that's why it can't access the popupcontent from the parent scope. Read about the whole Angular mess here. The quickest workaround was to add this in the link function:

scope.popupcontent = scope.$parent.popupcontent;

For now Kendo widgets don't watch scope variables for options — that is why the title doesn't magically update when you change the popuptitle. I added this:

$scope.toto.title($scope.popuptitle);

Here's the updated plunker:

http://plnkr.co/edit/lUtJP0LFgG0CHtlOb9ru?p=preview

jaybe78 · 2014-05-11T17:14:44Z

@mishoo
I thought it would work because I used the transclude option and as the documentation says:
"Transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside.
The transclude option changes the way scopes are nested. It makes it so that the contents of a transcluded directive have whatever scope is outside the directive, rather than whatever scope is on the inside. In doing so, it gives the contents access to the outside scope."

Obviously here it's different:
My directive wraps a directive(kendo window) itself already transcluded and that's why it doesn't work. Basically, in this case the scope of my directive becomes the scope the kendo window directive can have access to and not the controller scope if that makes sense?

mishoo · 2014-05-12T10:10:19Z

Looks like a serious issue. Reopening.

jaybe78 · 2014-05-12T10:39:20Z

@mishoo
I've created an other plunker to see that in action
I have a datable and open a popup with the details of the selected object. The object is never updated in the popup.
Workaround I've found so far is to

scope.watch('data') : data being the object displayed in the popup.

scope.$watch('data', function(newValue) {
                    if (newValue !== undefined && newValue != null) {                   
                        scope.data=newValue;
                    }
                });

Watching the data alone doesn't work for some reason, since when I open my popup the change is not notified in my directive... I debugged my directive and noticed that it doesn't go in the function which watches my data after doing:

    $scope.data = this.dataItem(selectedRows[0]);

Workaround is to add a hidden button in the html and then , just before opening the popup
, programmatically click on a button to trigger the change.

function onChangeSelection()
    {
        var selectedRows = this.select();
        var dataItem = this.dataItem(selectedRows[0]);
        $scope.data=dataItem;
          // click on a button to refresh data
          // uncomment it to refresh data in the popup content
          //document.getElementById("refresh").click();
            $scope.toto.center().open();
    }

http://plnkr.co/edit/dRgm7bZ9Il8ysfZbIlir?p=preview

mishoo · 2014-05-12T11:21:36Z

You can use $scope.$apply() instead of that ugly hack, or another way, instead of adding onChangeSelection in the options you can use k-on-change event (that will force a scope digest). Here's an update which shows the latter: http://plnkr.co/edit/zPZ1yPPE7cRmj8ce4g7Q?p=preview

However, I couldn't find a good solution for the transclusion scope. It looks like the problem is the double-transclusion (after our custom directive runs, the kendoWindow directive transcludes as well). Found this year-old Angular issue which seems related: angular/angular.js#1809

I'm closing it, it's not really an angular-kendo issue.

jaybe78 · 2014-05-12T17:14:03Z

@mishoo
Yeah basically the problem was that after transcluding the content, it has access to kendo directive's scope instead of controller's scope:
-Controller's scope
--Directive's isolated scope(popup directive)
----Kendo window's scope
------Element transcluded by directive. Should be directly under controller's scope

I'm gonna use the workaround provided on stackoverflow to fix it.
Cheers

kjartanvalur · 2014-05-13T14:10:30Z

Have you checked this out
https://github.com/kjartanvalur/angular-kendo-window

I created a sample from your plunkr:
http://plnkr.co/edit/kxWqVS8wwtrtmI1I1DdT?p=preview

mishoo closed this as completed May 11, 2014

mishoo reopened this May 12, 2014

mishoo closed this as completed May 12, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

directive wrapping kendo window cannot access to controller scope #314

directive wrapping kendo window cannot access to controller scope #314

jaybe78 commented May 10, 2014

chrisie commented May 11, 2014

mishoo commented May 11, 2014

jaybe78 commented May 11, 2014

mishoo commented May 12, 2014

jaybe78 commented May 12, 2014

mishoo commented May 12, 2014

jaybe78 commented May 12, 2014

kjartanvalur commented May 13, 2014

directive wrapping kendo window cannot access to controller scope #314

directive wrapping kendo window cannot access to controller scope #314

Comments

jaybe78 commented May 10, 2014

chrisie commented May 11, 2014

mishoo commented May 11, 2014

jaybe78 commented May 11, 2014

mishoo commented May 12, 2014

jaybe78 commented May 12, 2014

mishoo commented May 12, 2014

jaybe78 commented May 12, 2014

kjartanvalur commented May 13, 2014