Javascript 角Js。单击表格单元格并在弹出窗口中显示单元格详细信息

我对AngularJs是新手。 我有一个在表中显示记录列表的应用程序。 如： 没有名字 1 AAAA 2 BBBB 3中交 现在我想点击这个表中的EmpNo，我会看到一个弹出窗口（新的Html模板），其中应该有与所选EmployeeNo关联的所有其他员工记录

例如： 如果某人点击EmpNo:1，pop中的数据应为： EmpNo:1 名称：AAAA 单位：XYZ 经理姓名：LLLL 举个例子会很有帮助。 提前谢谢。 下面是我的应用程序中的一些示例代码

HTML:

---

您应该首先绑定每一行，以调用必须添加到控制器中的函数，例如openDetails。您的html看起来像：

<tr ng-repeat="item in items"><td ng-click="openDetails(item)">Name</td></tr>

有几种方法可以从angularjs打开弹出窗口

1-最好的方法是将引导与angularjs-seach一起用于“模态”示例

2-但有一种替代方案-

---

3-最后也是最迫切的一点是在angularjs中使用jquery。

感谢Diana提出的宝贵建议。然而，我能够解决它。 这是我创建的plunkr

这是钥匙。我使用状态来显示父页面和子页面

app.config(function($stateProvider) {
  $stateProvider.state("managerState", {
      url: "/ManagerRecord",
      controller: "myController",
      templateUrl: 'index.html'
    })
    .state("employeeState", {
      url: "empRecords",
      parent: "managerState",
      params: {
        empId: 0
      },
      onEnter: [
        "$modal",
        function($modal) {
          $modal.open({
            controller: "EmpDetailsController",
            controllerAs: "empDetails",
            templateUrl: 'empDetails.html',
            size: 'sm'
          }).result.finally(function() {
            $stateProvider.go('^');
          });
        }
      ]
    });
});

---

非常感谢，戴安娜。我已经采用了这种方法。但在我的情况下，效果不太好。因为在单击表格单元格时，我需要选择该Emp Id，然后传递该Id以调用api，该api将为我提供该员工的所有详细信息，我需要在新模板中显示这些信息。所以我试着使用stateProvider和factory来实现这一点。我已经编辑了我的问题，并在其中加入了一些片段。谢谢你的帮助！根据上面的代码，onclick事件已经将整个项目传递给openDetails。下面是一个plunker，它通过引导实现了angularjs。

app.config(function($stateProvider) {
  $stateProvider.state("managerState", {
      url: "/ManagerRecord",
      controller: "myController",
      templateUrl: 'index.html'
    })
    .state("employeeState", {
      url: "empRecords",
      parent: "managerState",
      params: {
        empId: 0
      },
      onEnter: [
        "$modal",
        function($modal) {
          $modal.open({
            controller: "EmpDetailsController",
            controllerAs: "empDetails",
            templateUrl: 'empDetails.html',
            size: 'sm'
          }).result.finally(function() {
            $stateProvider.go('^');
          });
        }
      ]
    });
});