Question

我正在使用AngularJS和Bootstrap构建一个应用程序，到目前为止，事情进展顺利。我有一个jQuery UI Dialog Widget实例，我在整个站点中使用它来确认，更新表单等。更新表单通常包含ng-model属性，所以我可以在Dialog出现时预加载输入。这是一个样本......

HTML

<div id='divMyEditor'>
    <table>
        <tr>
            <td>Login:</td>
            <td><input type='text' ng-model="selectedUserLogin" /></td>
        </tr>
        <tr>
            <td>Full Name:</td>
            <td><input type='text' ng-model="selectedUserName" /></td>
        </tr>
    </table>
</div>

JS

$timeout(function() {
    $("#divMyEditor").dialog({ 
        autoOpen: false, 
        draggable: false, 
        modal: true,
        closeOnEscape: true,
        width: 400,
        resizable: false
    });
},0);

这是事情变得奇怪的地方。任何时候我打开然后关闭其中一个对话框，离开页面，导航回页面，并尝试打开具有不同数据集的对话框面板，AngularJS到Dialog关系中断。更具体地说，面板不再识别对传入的$ scope变量所做的任何更改。在上面的示例中，面板将仅显示上次成功加载时selectedUserLogin和selectedUserName保持的值，而不管新值是什么是。所有内容仍然可以像普通的HTML表单一样进行编辑，但在我手动重置页面之前，Angular关系会丢失。

我知道Angular导航的特殊之处在于它实际上只是改变了单个页面上的显示，但是我没有看到它如何打破Dialog Widget。我还确认导航到任何页面并返回打破Dialog，无论额外的页面是否调用它自己的Dialog方法。沿着这些方向，使用不同的数据重复打开多个对话框可以正常工作，直到您离开页面。

这个真的让我难过，所以任何帮助或指导都会受到赞赏。

jQuery UI对话框在使用AngularJS Navigation时忽略ng-model

0 个答案: