AngularJS中的可重用弹出式解决方案

Question

我正在做一个项目，其中有大约十二个模板（将来还会有更多），这些模板需要显示在弹出/模态对话框中。 我已经用谷歌搜索，但是我不喜欢看到的解决方案（ 示例 ），所以我决定自己做。

我正在努力在控制器中拥有这样的接口。

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

在我的对话框服务中，我正在做这样的事情：

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);
  };

  });

我想在弹出窗口上进行两种方式的绑定，以便在关闭对话框后，可以将更新的数据传递给回调函数。

请检出插件： http ://plnkr.co/edit/uhZ0r0rXCacnvoyCP7nQ?p=preview

谁能指出我正确的方向？

Answer 1

在查看您的代码示例后：

$compile(html)(data); 

数据-这里应该是$ scope。

Answer 2

看看这个： http : //plnkr.co/edit/SUQnUhX0wyi9UDMc4Vpl?p=preview

我创建了一个指令来管理弹出窗口。 这将在单击关闭按钮时触发控制器回调，并将数据从输入框传递给它。 据我了解，这大致可以实现您想要实现的目标。