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>
        </div>
    </div>

    <script>
        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({
                    options:{
                        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!';
                    }
                    else{
                        $scope.result = 'canceled!';
                    }
                });
             };
        }

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

          $scope.confirm = function(){
            $windowInstance.close(true);
          };

          $scope.cancel = function(){
            $windowInstance.close(false);
          };
        }

        mycontroller.$inject = ['$scope', '$kWindow'];
    </script>
    // modal.html
    <h3></h3>

    <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