Jspanel（cshtml中的假模态窗口）与angularjs答案

【问题标题】：Jspanel (fake modal window in cshtml) with angularjsJspanel（cshtml中的假模态窗口）与angularjs
【发布时间】：2015-06-13 11:06:37
【问题描述】：

有人用过 JsPanel 和 AngularJS 吗？

我找不到这样的例子。否则，是否有任何类似的框架来管理页面内的模态窗口，打开和访问其中的 iframe，并使用 postmessage 通信？

【问题讨论】：

我假设您需要上传文件？否则，普通的 jQuery post 方法就足够了 (api.jquery.com/jquery.post)。换句话说：您实际上需要做什么？

标签： jquery angularjs razor modal-dialog postmessage

【解决方案1】：

您可以查看 Kendo Ui 框架。他们有一个不错的模态窗口，支持 iframe：Kendo Window。它甚至看起来包含了一些 angular.js 功能。

我不知道它是否适合您的需求，但它是一个值得一看的好框架。希望对您有所帮助！

【讨论】：

【解决方案2】：

包含 Angular 内容的一种方法是使用指令来启动 JSPanel，在页面上包含一个带有 Angular 内容的 ID 的 div。这对我有用。

    .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);
            }
        };
    })

在你的 Angular 内容中添加一个带有 ID 的 div（这只是一个大家最喜欢的 ToDo 示例：

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

【讨论】：

合法的限制值为： E 代表元素名称 A 代表属性 C 代表类别 M 代表注释