Modal Window and AngularJS

[Keith]

Hi

I'm currently trying to learn all of this so if I'm being stupid please forgive me!

I'm using the ui-router from Angular and have a nested state which I would like to display inside a Window (consisting of a html view and it's related controller). Unfortunately I don't see anything in the window. If I move the ui-view div to outside of the window div, everything is displayed correctly.

I'm guessing it's something to do with how Kendo appends the Window to the end of the document body which means my ui-view is no longer in the same controller scope?

Here's my routing script:

.state("matches", {
       url: "/matches",
       templateUrl: "Views/matches.html"
})

.state("matches.fixture", {
    params: ['FixtureID'],
    views: {
        'fixture' : {
            templateUrl: 'Views/matches.fixture.html',
        }
    }
})

(I moved to named views thinking that this may solve the issue. Originally I was just using an empty ui-view attribute)

and the view code:

<!-- Kendo Window which receives the view loaded by the state change-->
<div kendo-window="winMatch" k-title="'Fixture Detail'"
     k-width="600" k-height="200" k-visible="false"
     k-modal="true">
    <div ui-view="fixture">
    </div>
</div>

Please can you help me to get this working (if possible) or suggest a better way of using the Window with Angular?

Thanks
Keith

[Atanas Korchev]

Hi,

Indeed the window by default appends itself in the BODY element. You can override this by setting its appendTo option. Perhaps setting it will address this issue. If this doesn't help please provide a runnable demo which reproduces the problem. You can start by editing the angularjs window demo.

Regards,
Atanas Korchev
Telerik

 

 

[Keith]

Hi Atanas

Thanks for this, the appendTo did the trick!

[Vladimir]

Hi, Keith.

Can you explain, how did you solve it? Where did you place the "ui-view" div? "appendTo" doesn't work for me. When I place the ui-view div outside the window - it shows me correct content, but outside the window :). When I place it inside the window div it displays copy of my parent state inside the window. Tried "k-append-to" and .setOptions({ appendTo: "div#tiPreview"}); Nothing works for me :(

What is the trick? :)

[Keith]

Hi Vladimir

It's a while since I did this but having looked back through the code it seems I had to do the following:

In the "owning" view, I have the following markup note the two divs. The "hack" div is where you append the window.

 

<div id="winMatchHack">
</div>

<!-- Kendo Window which receives the view loaded by the state change-->
<div kendo-window="winMatch" k-options="windowOptions">
    <div ui-view>
    </div>
</div>

Then in the controller, I have the following for the window options

$scope.windowOptions = {
    title : 'Fixture Detail',
    width : 600,
    height : 200,
    visible : false,
    modal: true,
    appendTo: '#winMatchHack',
    close: $scope.onWinMatchClosed,
}

 

Good luck!

Keith

[Keith]

Sorry forgot to show my state:

.state("matches.fixture", {
                        params: ['FixtureID'],
                        templateUrl: 'Views/matches.fixture.html',
                        controller: function($scope) {
                            $scope.$parent.winMatch.open();
                        }
                    })

[Vladimir]

It works!

Thank You very much!