使用jQuery添加含ng-repeat的表格行时出现$compile未定义错误 | AngularJS

首先，你碰到的$compile is not defined错误，核心原因是没有在控制器中正确注入Angular的$compile服务，而且直接用jQuery添加DOM后，Angular并不会自动识别里面的ng-repeat这类指令，必须手动编译让Angular建立数据绑定。下面分两种方案解决：

方案一：正确注入$compile并手动编译新元素 #

1. 先在控制器中注入$compile服务 #

Angular的依赖注入是强制性的，你需要在控制器定义时明确声明要使用$compile，否则全局找不到这个服务：

angular.module('MyApp')
  .controller('sellAndSupply', ['$scope', '$compile', function($scope, $compile) {
    // 你的控制器逻辑写在这里
  }]);

2. 修改添加行的逻辑，编译后再插入DOM #

不要直接把原始HTML用jQuery prepend，而是先让Angular编译这段HTML，绑定到当前作用域后再插入：

$scope.addNewPurchaseRow = function() {
  // 定义包含ng-repeat的新行HTML
  const newRowHtml = `
    <tr>
      <td>
        <input type="text" list="productOptions" ng-model="currentPurchase.product">
        <datalist id="productOptions">
          <option ng-repeat="item in products" value="{{item.name}}">{{item.name}}</option>
        </datalist>
      </td>
      <td><input type="number" ng-model="currentPurchase.quantity"></td>
      <!-- 其他需要的列 -->
    </tr>
  `;

  // 编译HTML，生成绑定当前scope的DOM元素
  const compiledElement = $compile(newRowHtml)($scope);

  // 把编译好的元素插入表格
  $('#purchasesTable').prepend(compiledElement);
};

这样操作后，新行里的ng-repeat就能被Angular正确解析，数据绑定也能正常工作。

方案二：更符合Angular思维的做法（推荐） #

其实Angular更推荐通过数据驱动DOM，而不是手动操作DOM。你可以维护一个数组来管理表格行，用ng-repeat自动渲染，添加新行只需要往数组里添加元素即可，完全不需要jQuery和$compile：

1. 视图代码修改 #

<body ng-app="MyApp">
  <div class="container" ng-controller="sellAndSupply">
    <table id="purchasesTable">
      <thead>
        <tr>
          <th>商品</th>
          <th>数量</th>
          <!-- 其他表头 -->
        </tr>
      </thead>
      <tbody>
        <!-- 用ng-repeat渲染所有行，unshift对应prepend的效果，所以数组开头是最新行 -->
        <tr ng-repeat="purchase in purchaseRows track by $index">
          <td>
            <input type="text" list="productOptions" ng-model="purchase.product">
            <datalist id="productOptions">
              <option ng-repeat="item in products" value="{{item.name}}">{{item.name}}</option>
            </datalist>
          </td>
          <td><input type="number" ng-model="purchase.quantity"></td>
        </tr>
      </tbody>
    </table>
    <button ng-click="addNewRow()">添加新采购行</button>
  </div>
</body>

2. 控制器代码修改 #

angular.module('MyApp')
  .controller('sellAndSupply', ['$scope', function($scope) {
    // 假设你的商品列表是这个
    $scope.products = [
      {name: '商品A'},
      {name: '商品B'},
      {name: '商品C'}
    ];

    // 维护采购行的数组，初始可以为空或者加默认行
    $scope.purchaseRows = [];

    // 添加新行的方法，unshift把新元素放到数组开头，对应prepend的效果
    $scope.addNewRow = function() {
      $scope.purchaseRows.unshift({
        product: '',
        quantity: 1
      });
    };
  }]);

这种方式完全由Angular管理DOM，避免了手动操作DOM带来的兼容性和绑定问题，代码也更简洁易维护。

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