【问题标题】: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 代表注释
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-28
    • 2014-11-08
    • 2015-03-08
    • 1970-01-01
    相关资源
    最近更新 更多