Using a Modal Window with KendoUI inside of Angula

Question

Does anyone have any experience using KendoUI's window with AngularJS?

I'm currently using Angular-Kendo but I'm not entirely sure hot to cleanly use the window. Or if there is any other solutions for presenting a modal dialog and filling it with a form loaded via a partial I'm open to that as well.

My current code looks something like this:

HTML:

    <div kendo-window id="addWindow" ng-hidden></div>

JS:

    $scope.addSection = function() {
        $("#addWindow").data("kendoWindow").open();
        return false;
    };

But I hate this, and it feels wrong for how I'm doing everything else. Any thoughts on a better way?

Answer 1

@anise thanks for ur information

finally i also resolve the issue.

Controller

$scope.window;

$scope.OpenWindow= function()  // custom function on click
{
  $scope.DlgOptions = {
            width: 550,
            height: 400,
            visible: false,
            actions: [

                "Maximize",
                "Close"
            ]
        };

        $scope.window.setOptions($scope.DlgOptions);
        $scope.window.center();  // open dailog in center of screen
        $scope.window.open();
};

View

 <div kendo-window="window" k-visible="false" k-modal="true">   </div> 

Answer 2

Check out this blog post:

http://www.kendoui.com/blogs/teamblog/posts/13-06-24/announcing-angular-kendo-ui.aspx?utm_content=bufferbbe83&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer

They rewrote Angular-Kendo and have an example of a clean way to use a window.

Answer 3

Check out this library

https://github.com/kjartanvalur/angular-kendo-window

  var windowInstance = $kWindow.open({
                        options:{
                         modal: true,
                         title: "Window title",
                         width: 400,
                       },
                        templateUrl: 'modal1.html',
                        controller: 'modalController',
                        resolve: {
                            parameter1: function () {
                                return "Test...";
                            }
                        }
                    });
                    windowInstance.result.then(function (result) {
                        // Here you can get result from the window
                    });