CODEWITHSUNDEEP
javascriptangularjs
Koder
Koder

Reputation: 1914

Re-usable popup solution in AngularJS

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 ?

Upvotes: 1

Views: 2359

Answers (2)

Konstantin K
Konstantin K

Reputation: 1317

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.

Upvotes: 0

Stepan Suvorov
Stepan Suvorov

Reputation: 26236

After reviewing you code example:

$compile(html)(data);

data - should be $scope here.

Upvotes: 1

Related Questions