Jspanel (fake modal window in cshtml) with angularjs

Question

Has anyone used JsPanel with AngularJS?

I can't find examples of that. Otherwise, is there any similar framework in order to manage modal window inside a page, open and access an iframe in it, and use postmessage communication?

Answer 1

You could have a look at the Kendo Ui framework. They have a nice modal window with iframe support: Kendo Window . It even looks like there is some angular.js features included.

I dont know if it suits your needs, but its a good framework thats worth a look. Hope that helps!

Answer 2

One way to include Angular content is to use directive to initiate the JSPanel, include a div with an ID with Angular content on the page.. This worked for me.

    .directive('jspanel', function() {
        return {
            restrict: 'A',
            link: function(elem, attrs, ctrl) {
                var panel1 = $.jsPanel({
                    title:    "jsPanel Title",
                    size:     { width: 400, height: 200 },
                    position: "bottom right",
                    theme:    "success",
                    panelstatus: "minimized",
                    content:$( "#todos" )

                });
                panel1.control("disable", "close");
                window.setTimeout( function(){
                    panel1.title('<small>Memo Pad</small>');
                }, 3000);
            }
        };
    })

Add a div with an ID with your Angular content (this is just a everyone's favorite ToDo example:

 <div id="todos" ng-controller="MemopadCntrl">
                <ul id="todo-list" >
                   <li ng-repeat="(id, todo) in todos |   filterCompleted:myParam " ng-class="{completed: todo.completed, editing: todo == editedTodo}">
                   </li>
               </ul>
</div>