New to Kendo UI for jQuery? Download free 30-day trial

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 = ${
                        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