Jquery PNotify = bottomleft 配置无法正常工作

Question

使用 Pnotify 插件 http://sciactive.com/pnotify/

我正在尝试将其重新定位到屏幕的左下角，并让它向上推连续的菜单..

定位没问题，但通知器的方向都是相互叠加的（我只看到最新的通知，其余的都在后面）

代码应该是直截了当的，

 var stack_bottomleft = {"dir1": "up", "dir2": "up", "push": "top"};

            new PNotify({
                title: "Title",
                type: "Success",
                text: "My Message 1",
                animation: "fade",
                animate_speed: 'fast',

                addclass: "stack-bottomleft",
                stack:    stack_bottomleft

            });

            new PNotify({
                title: "Title",
                type: "Success",
                text: "My Message 2",
                animation: "fade",
                animate_speed: 'fast',

                addclass: "stack-bottomleft",
                stack:    stack_bottomleft

            });


            new PNotify({
                title: "Title",
                type: "Success",
                text: "My Message 3",
                animation: "fade",
                animate_speed: 'fast',

                addclass: "stack-bottomleft",
                stack:    stack_bottomleft

            });

也许是一个错误？

Answer 1

您必须注意创建堆栈的位置。例如，不要在 if 语句中创建它，因为它会为每个通知创建一个新堆栈，并且这些堆栈会重叠。我在 pnotify 主页上对 index.html 的评论中找到了这个：

  /*********** Custom Stacks ***********
    * A stack is an object which PNotify uses to determine where
    * to position notices. A stack has two mandatory variables, dir1
    * and dir2. dir1 is the first direction in which the notices are
    * stacked. When the notices run out of room in the window, they
    * will move over in the direction specified by dir2. The directions
    * can be "up", "down", "right", or "left". Stacks are independent
    * of each other, so a stack doesn't know and doesn't care if it
    * overlaps (and blocks) another stack. The default stack, which can
    * be changed like any other default, goes down, then left. Stack
    * objects are used and manipulated by PNotify, and therefore,
    * should be a variable when passed. So, calling something like
    *
    * new PNotify({stack: {"dir1": "down", "dir2": "left"}});
    *
    * will **NOT** work. It will create a notice, but that notice will
    * be in its own stack and may overlap other notices.
    */

我遇到了同样的问题：

            $rootScope.$watch('feedback',function(){
                if($rootScope.feedback){
                 var stack_bottomleft = {"dir1": "up", "dir2": "right", "firstpos1": 25, "firstpos2": 25};
                    new PNotify({
                        title: $rootScope.feedback.title,
                        text: $rootScope.feedback.text,
                        type: $rootScope.feedback.type,
                        addclass: 'stack-bottomleft',
                        stack: stack_bottomleft
                    });
                    $rootScope.feedback=null;
                }
            });

并修复它：

var stack_bottomleft = {"dir1": "up", "dir2": "right", "firstpos1": 25, "firstpos2": 25};
            $rootScope.$watch('feedback',function(){
                if($rootScope.feedback){
                    new PNotify({
                        title: $rootScope.feedback.title,
                        text: $rootScope.feedback.text,
                        type: $rootScope.feedback.type,
                        addclass: 'stack-bottomleft',
                        stack: stack_bottomleft
                    });
                    $rootScope.feedback=null;
                }
            });

希望对你有帮助！

Answer 2

就像@Tristan Reifert 的mentioned 一样，在通知初始化中设置堆栈对象和将堆栈对象传输到通知初始化参数之间存在关键区别。

因此，即使下一个代码也不起作用：

var showNotice = function () {
    var stack = {dir1: "up", dir2: "left", firstpos1: 25, firstpos2: 25},

    return new PNotify({
        title: 'Some title', text: 'Some text',
        addclass: "stack-bottomright",
        stack: stack
    });
}

这里的要点是相同堆栈通知应该接收为其配置的唯一且相同的堆栈对象。在上面显示的情况下，新对象将在每次函数调用时初始化，并且每个通知都会收到不同的对象。

为避免这种情况，所有通知都应针对同一对象。例如：

    var stack = {dir1: "up", dir2: "left", firstpos1: 25, firstpos2: 25},
        showNotice = function () {     
            return new PNotify({
                title: 'Some title', text: 'Some text',
                addclass: "stack-bottomright",
                stack: stack
            });
        }

这样做，showNotice() 的每个后续调用都将处理之前通知之前处理的相同堆栈对象。