javascript - 观看 ng-click 从 ajax 查询加载的数据

Question

我有一个 AngularJS 服务可以打开搜索提示、执行查询、显示搜索结果并允许用户选择一个项目。

我遇到的问题是当我显示搜索结果时，我无法让 ng-click 工作。在我的搜索结果列表中，用户可以单击带有 ng-click 的 html anchor 的值来选择该项目。当用户点击他们想要的项目时，我无法调用 ng-click 函数。当我使用 ng-click 单击 anchor 时，没有任何反应。

以下代码是在显示搜索结果模式后“呈现”的 angularjs-ui-bootstrap 事件。我正在获取 json 搜索结果并将它们呈现在 jquery 数据表中。在“createdRow”中，我尝试为 ng-click 添加观察器，但它不起作用。

如何让 ng-click 函数从我的搜索结果中调用？

// after the modal window is rendered, set the data and datatable
_instance.rendered.then(function() {
  console.log('searchService.showResults.rendered.then;');
  $('#searchresultsmodaltable').dataTable({
    info: false,
    searching: false,
    ordering: false,
    lengthChange: false,
    autowidth: true,
    pageLength: 6,
    pagingType: "simple_numbers",
    language: {
      emptyTable: "No results found."
    },
    data: _results,
    columns: [{
      data: "codeHtml",
      title: "Code"
    }, {
      data: "name",
      title: "Name"
    }],
    createdRow: function(row, data, dataIndex) {
      console.log('searchService.showResults.createdRow;');
      $compile(angular.element(row).contents())($scope);
    }
  });
});

笨蛋: https://plnkr.co/edit/BAtlRpVR2MBPfXr7wmJq?p=preview

要在 plunker 代码中复制问题:

1. 点击“搜索”按钮打开搜索输入模式。
2. 单击“搜索”按钮以显示搜索结果模式。
3. 在搜索结果中，您将看到“code2”。如果您点击“code2”，什么也不会发生。 html anchor 设置为 ng-click="onClickSelect('code2')"，但单击时不会触发该事件。如果您查看 plunker 代码中的第 70 行，那是我获取搜索结果并将它们放入数据表的地方。第 93 行是我尝试添加不起作用的 ng-click 观察器的地方。

谢谢。

Answer 1

我已经解决了你的问题。看你的代码，controller被使用了两次(两次uibModal)。每个 Controller 都会有一个新范围，因此您传递给 showResult 函数的范围是旧范围。

要修复您的代码，请分离您的 Controller ，并将 showResult 移动到第二个。