I'm building an application using AngularJS and Bootstrap and so far things have gone pretty smoothly. I have a jQuery UI Dialog Widget instance that I use throughout the site for things like confirmations, update forms, etc. The update forms usually contain ng-model attributes so I can pre-load the inputs when the Dialog appears. Here's a sample...
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);
Here's where things get weird. Anytime I open then close one of these Dialogs, navigate away from the page, navigate back to the page, and attempt to open the Dialog panel with a different data set, the AngularJS to Dialog relationship breaks. More specifically, the panel no longer recognizes any changes made to the $scope variables being passed in. In the example above, the panel will just show the values that selectedUserLogin and selectedUserName held on the last successful load, regardless of what the new values might be. Everything is still editable just like a normal HTML form, but the Angular relation is lost until I do a manual page reset.
I know Angular navigation in special in that it's really just changing the display on a single page, but I don't see how this breaks the Dialog Widget. I've also confirmed that navigating to ANY page and back breaks the Dialog, regardless of whether or not the extra page calls it's own Dialog method. Along those lines, opening multiple Dialogs repeatedly with different data works fine until you leave the page.
This one has really stumped me, so any help or guidance would be appreciated.
$compile
-ing the DOM? Thescope
you use there would be the scope bound to the HTML. I suspect you are not updating that scope? – musically_ut 21 hours ago