如何在单击div后使用angular js打开弹出窗口并将某些对象传递给窗口

Question

我希望知道如何在AngularJS中打开带有简单动画的弹出窗口，并且背景应该是模糊或暗色的，以及如何将对象传递给新的弹出窗口。

在HTML中，我有这样一种类型的div：

<div class="col-xs-7 col-md-2 rcorners2 " style="height:168px;width:126px;  margin-left: 10px" ng-click="clickevent(app)">

我有一个 app.js 文件：

  app.controller('test',['$scope',function($scope){
    $scope.clickevent=function(app){
      $scope.app=app;
      alert(app.name);
    }
  }]);

这个应用程序对象包含不同的属性，如应用名称和描述等。这些属性应该在新的弹出窗口中显示一个按钮。

我该如何实现？

- smartechno

---

我最近使用了ngDialog来创建对话框，发现它非常方便。 - Wayne Ellery

ngDialog很糟糕和令人讨厌... $modal是ui.bootstrap的一部分... 我总是使用它。 - Jony-Y

Answer 1

Wayne建议使用ngDialog，这是一个选项，但我发现它真的很烦人...我只是选择bootstrap modal或ui.bootstrap $modal... ui.bootstrap 只需使用$modal...

- Jony-Y

Answer 2

1. 你可以使用 $modal
   参考链接: https://angular-ui.github.io/bootstrap/

app.controller('yourController', yourController);
yourController.$inject = ['$scope', '$modal'];
function yourController($scope, $modal){...}

然后开始使用它。

2. 使用JavaScript：
   将一个对象分配给窗口

 const pageInfo = {
             name: 'myPage',
             url: 'http://myPage...'
         }
 window.pageInfo = pageInfo;
 window.open(pageInfo.url, "_blank");

然后在下一页上检查window.opener

if (window.opener && window.opener !== null) {
    console.log('has initial pageInfo !');
    let pageInfo = window.opener.pageInfo;
} else {
    console.log('No initial pageInfo !');
}

- stackoverYC