Question

我正在尝试使用AngularJS部分HTML页面中的JQuery UI Dialog。

问题是对话框工作正常，甚至可以从视图中打开多种类型 - 只要视图第一次打开。

然而，当导航到另一个视图，然后使用对话框返回视图时 - 尝试打开对话框的工作方式就好像会显示2个对话框而不是一个。浏览器“刷新”视图URL会使问题消失，直到下一个来回导航。

我放置了一个测试应用程序（未与真正的后端集成）来显示问题：

导航至： http://socialtodow.cloudapp.net/app/tdg_test/#!/new

点击红色“获取建议”按钮：对话框显示确定，可以使用Esc关闭。

现在，请导航至http://socialtodow.cloudapp.net/app/tdg_test/#!/search，然后返回http://socialtodow.cloudapp.net/app/tdg_test/#!/new

点击红色“获取建议”。你得到2个对话框，一个在另一个对话之上 - 我正在讨论的错误行为。

相关指令代码：

.directive('advice', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var self = $(element),
                adviceDialog = $(attrs.advice);

            adviceDialog.dialog({
                width: 260,
                height: 405,
                autoOpen: false,
                modal: true,
                dialogClass: "advice_dialog"
            });

            self.click(function () {
                adviceDialog.dialog('open');
            });

            adviceDialog.find('button').click(function() {
                adviceDialog.dialog('close');
            });
        }
    }
}])

检查

 adviceDialog.is('dialog'))

似乎不起作用 - 它总是如此。

我正在寻找修复方案（不是基础设施更换）。

任何提示都将受到赞赏。

最大

Answer 1

这是对开发人员在项目中发现的指令的修改，似乎解决了这个问题：

.directive('advice', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var self = $(element),
                adviceDialog = $(attrs.advice);

            self.click(function () {
                adviceDialog.dialog({
                    width: 260,
                    height: 405,
                    autoOpen: false,
                    modal: true,
                    dialogClass: "advice_dialog",
                    close: function() {
                        adviceDialog.dialog('destroy');
                    }
                });

                adviceDialog.dialog('open');
            });

            adviceDialog.find('button').click(function() {
                adviceDialog.dialog('close');
            });
        }
    }
}])

注意：原始问题中提到的URl可能无法运行 - 对不起。

最大

可重用的JQuery UI对话框不适用于AngularJS partial

1 个答案: