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 ?

Answer 1

After reviewing you code example:

$compile(html)(data); 

data - should be $scope here.

Answer 2

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.