Angular + jQuery UI dialogs

5,353 views
Skip to first unread message

Ben Sgroi

unread,
Aug 27, 2012, 7:06:13 PM8/27/12
to ang...@googlegroups.com
So far, I haven't seen anyone attempting to this, so I'm wondering if it might be a lost cause.  What I'm trying to do is use a jQuery UI dialog on an AngularJS page, but I'd like to use Angular's data-binding on the content of the dialog.  The problem is that after you create a structure like this:

<body>
   <div ng-controller="MyController">
      <div id="modal">
         {{ name }}
      </div>
   </div>
</body>

once you create the dialog with $('#modal').dialog(...), jQuery UI moves the content to a new div right before the body close tag.  So the DOM ends up something like this, roughly:

<body>
   <div ng-controller="MyController">
   </div>
   <div id="modal">
      {{ name }}
   </div>
</body>

The dialog content is no longer located within the controller's block, and Angular has all sorts of problems with that.

Anybody have any ideas?  I'm not aware of any jQuery UI options to disable moving of the element.  I'm hesitant to start using another dialog plugin, because jQuery UI is already in use throughout the site, and I want to keep the UI consistent.  But maybe that's the only way to get around the problem...

Ben Sgroi

unread,
Aug 27, 2012, 7:17:09 PM8/27/12
to ang...@googlegroups.com
I realize that an option is to move the ng-controller directive to the body element, but this is an ASP.Net site, and the body element is in the master page used by almost all of the site pages, so I don't want AngularJS running on every page of the site.

Marco Alves

unread,
Aug 27, 2012, 7:20:38 PM8/27/12
to ang...@googlegroups.com
Have you looked at angular-ui dialogs?

http://angular-ui.github.com/

Ben Sgroi

unread,
Aug 27, 2012, 7:25:07 PM8/27/12
to ang...@googlegroups.com
Briefly, but that uses the Twitter Boostrap modal dialog, not jQuery UI.

Marco Alves

unread,
Aug 27, 2012, 7:31:25 PM8/27/12
to ang...@googlegroups.com
Yes, but maybe a quick inspection to code could result in some implementation idea -- I'm not sure it will.

Rob Hicks

unread,
Aug 27, 2012, 7:37:12 PM8/27/12
to ang...@googlegroups.com
I've dealt with this problem in other environments, not angular.

Since you have jquery, after the dom has loaded, you might be able to move the element back within the scope and see if Angular recognizes it.

Rob

richar...@gmail.com

unread,
Jan 3, 2013, 8:34:48 PM1/3/13
to ang...@googlegroups.com
Hey, 

Just in case anyone is still paying attention to this thread, a way to solve this problem is by creating a angularjs directive for the jquery dialog.  

Check out my jsFiddle for an idea.

Richie

Ben Kuhl

unread,
Jun 5, 2013, 4:11:15 PM6/5/13
to ang...@googlegroups.com, richar...@gmail.com
Has anyone developer this concept further?  I'm in need of a service and/or directives that handle jQuery UI items and am still hunting for an out-of-the-box solution.
Reply all
Reply to author
Forward
0 new messages