ui-grid可展开模板ng-click事件失效，求事件绑定及数据访问方案

我之前也踩过这个坑，核心原因是ui-grid的可展开模板运行在隔离作用域里，直接用常规的ng-click绑定$scope方法会找不到，而且要访问当前行数据得用模板内置的对象。下面给你具体的解决步骤：

1. 修复ng-click失效问题 #

要在隔离作用域中调用父作用域（也就是你的MainCtrl的$scope）里的方法，需要通过grid.appScope来访问——这是ui-grid专门提供的、指向父作用域的引用，通过它就能调用你在控制器里定义的方法了。

2. 访问当前行对应的数据 #

可展开模板里可以直接使用row.entity来获取当前展开行的实体数据，这个是ui-grid自动注入到模板作用域中的对象，能直接拿到该行的所有字段。

完整代码示例 #

先处理模板部分（两种方式任选其一） #

方式一：用ng-template定义模板

<div ui-grid="gridOptions" ui-grid-expandable ui-grid-selection class="grid"></div>

<!-- 可展开模板 -->
<script type="text/ng-template" id="expandableTemplate.html">
  <div class="expandable-content">
    <!-- 通过grid.appScope调用控制器方法，同时传入当前行数据 -->
    <button ng-click="grid.appScope.showdiv(row.entity)">点击操作当前行</button>
    <!-- 直接展示当前行数据示例 -->
    <p>当前行ID：{{row.entity.id}}</p>
    <p>当前行名称：{{row.entity.name}}</p>
  </div>
</script>

方式二：直接在gridOptions里定义字符串模板

$scope.gridOptions.expandableRowTemplate = `
  <div style="padding:10px;">
    <button ng-click="grid.appScope.showdiv(row.entity)">操作按钮</button>
    <p>当前行数据：{{row.entity | json}}</p>
  </div>
`;

然后修改控制器代码 #

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']); 

app.controller('MainCtrl', ['$scope', '$http', '$log', '$timeout', function ($scope, $http, $log, $timeout) { 
  // 初始化grid配置
  $scope.gridOptions = {
    expandableRowTemplate: 'expandableTemplate.html', // 如果用方式二就替换成字符串模板
    expandableRowHeight: 180,
    columnDefs: [
      // 这里放你的列定义，比如：
      { name: 'id' },
      { name: 'name' }
    ]
  };

  // 修改你的showdiv方法，接收当前行数据作为参数
  $scope.showdiv = function(currentRowData) {
    $log.log('当前点击的行数据：', currentRowData);
    // 这里写你的业务逻辑，比如显示div、操作数据等
  };

  // 加载数据的逻辑（示例）
  $http.get('/your-data-url').then(function(res) {
    $scope.gridOptions.data = res.data;
  });
}]);

关键注意点 #

• 模板中的row和grid都是ui-grid自动提供的作用域变量，不需要你自己定义或传递。
• 如果你的方法需要修改$scope里的变量，直接在grid.appScope后调用即可，作用域会自动关联。

内容的提问来源于stack exchange，提问作者developer