Re-usable popup solution in AngularJS

Question

I am doing a project where there are about a dozen templates ( there will be more in future ) which i need to display in popup/modal dialog boxes. I've googled but i didnt quite like the solutions i saw (example) so i've decided to make my own.

I am working towards having an interface like this in my controller.

  $scope.popup1Buttonclicked = function(){
    dialogService.showdialog("popup1",$scope.popup1data,function(result,data){
      if(result == "OK"){
        //save data
      }
    });
  };

And in my dialog service i am doing something like this:

myApp.service("dialogService",function($compile){

  this.showdialog = function(popupid,data,callback){
      var html = "<div>name: {{data.name}}</div>";
      var element = $compile(html)(data);
      $("#pop").append(element);
      //$("#pop").showDialog(element);
  };

  });

I want two way binding on the popup so that after the dialog box is closed, i can pass the updated data to callback function.

Please check out plunker : http://plnkr.co/edit/uhZ0r0rXCacnvoyCP7nQ?p=preview

Can anyone point me in the right direction ?

I really don't get what you're trying to do here. You need a popup that allows entering some data and then calls a controller action function once it's closed? — Konstantin K, Oct 01 '13 at 10:49
Yes. I want to invoke the popup from controller by passing some data, when the user is done editing data from popup, i want the updated data back in my controller. — Koder, Oct 01 '13 at 10:55
I like this lib - https://github.com/marcorinck/angular-growl — Stepan Suvorov, Oct 01 '13 at 11:43
Thanks STEVER, Not exactly what i am looking for but it will be useful for me later on... — Koder, Oct 01 '13 at 11:52

score 1 · Answer 1 · answered Oct 01 '13 at 11:58

1

After reviewing you code example:

$compile(html)(data);

data - should be $scope here.

answered Oct 01 '13 at 11:58

Stepan Suvorov

25,118
26
108
176

Thanks STEVER, your suggestion helped me close in on the solution. – Koder Oct 01 '13 at 13:57

score 0 · Accepted Answer · answered Oct 01 '13 at 12:20

0

have a look at this: http://plnkr.co/edit/SUQnUhX0wyi9UDMc4Vpl?p=preview

I created a directive to manage popups. This triggers the controller callback on close button click and passes data from the input box to it. From my understanding, this does roughly what you wanted to achieve.

answered Oct 01 '13 at 12:20

Konstantin K

1,317
2
10
18

This is great, but i am looking for the ability to prefill data as well, in your example, i would like to see the input prefilled with popup1data - "popup1name". which is why i am passing $scope.popup1data to the dialogservice and hoping for some level of databinding – Koder Oct 01 '13 at 13:13
Your code helped, i modified my original code and its working now. STEVER's suggestion helped too. Here is the plunker which is very close to how i envisioned it..http://plnkr.co/edit/ERIURG?p=preview – Koder Oct 01 '13 at 13:56

Re-usable popup solution in AngularJS

2 Answers2