Load View in Window

This article is contributed by Kjartan Valur.

The $kWindow is a service which dynamically creates Kendo UI windows with a separate template and controller. The complete source code is available in the kjartanvalur/angular-kendo-window GitHub repository.

The following example demonstrates how to open a modal Kendo UI Window.

<div ng-app="KendoDemos">
    <div ng-controller="MyCtrl">
        <button type="button" ng-click="openWindow()">Open Kendo UI Window</button>

    var MyApp = angular.module('myapp', ['kendo.window', 'kendo.directives']);

    MyApp.controller("mycontroller", mycontroller);
    MyApp.controller("modalController", modalController);

    function mycontroller($scope, $kWindow) {
        $scope.title = "My modal title";
        $scope.content = "This is my message to the window!";
        $scope.result = "";

        $scope.openWindow = function(){
            var windowInstance = $kWindow.open({
                    modal: true,
                    title: $scope.title,
                    resizable: true,
                    height: 150,
                    width: 400,
                    visible: false
                    templateUrl: 'modal.html',
                    controller: 'modalController',
                    resolve: {
                        message: function () {
                            return $scope.content;

            windowInstance.result.then(function (result) {
                if (result) {
                    $scope.result = 'confirmed!';
                    $scope.result = 'canceled!';

    function modalController($scope, $windowInstance, message) {
      $scope.message = message;

      $scope.confirm = function(){

      $scope.cancel = function(){

    mycontroller.$inject = ['$scope', '$kWindow'];
// modal.html

<button type="button" ng-click="confirm()">Confirm</button>
<button type="button" ng-click="cancel()">Cancel</button>

See Also

In this article
Not finding the help you need? Improve this article