AngularJS自定义指令生成HTML并$compile，如何获取循环创建的answers模型？

首先，你的代码里有几个关键问题导致无法获取answers模型：

1. 未初始化模型对象：AngularJS需要提前初始化对象才能通过点语法（ng-model="answers.amount"）自动创建属性，否则$scope.answers会是undefined。
2. 隔离作用域的干扰：你的stepContents指令使用了隔离作用域（scope: {content: '='}），动态生成的输入框绑定的是指令隔离作用域里的answers，而非控制器作用域的answers，所以控制器里拿不到数据。
3. 步骤间数据未隔离：如果所有步骤共用同一个answers对象，切换步骤时数据会被覆盖，无法保存每个步骤的独立数据。

下面是修改后的完整方案：

1. 调整控制器代码，初始化步骤独立的模型 #

var app = angular.module('MyApp', []);

app.controller('StepController', function($scope) {
  $scope.index = 0;
  // 存储所有步骤的答案，每个步骤对应一个独立对象
  $scope.stepAnswers = [];

  // 初始化当前步骤的答案对象
  $scope.initCurrentAnswers = function() {
    if (!$scope.stepAnswers[$scope.index]) {
      $scope.stepAnswers[$scope.index] = {};
    }
    $scope.currentAnswers = $scope.stepAnswers[$scope.index];
  };

  $scope.nextStep = function() {
    // 这里就能拿到当前步骤的输入数据了
    console.log('当前步骤的答案:', $scope.currentAnswers);
    
    // 切换到下一个步骤（可以根据你的JSON步骤数量做边界判断）
    $scope.index++;
    $scope.showStep();
  };

  $scope.showStep = function() {
    $scope.initCurrentAnswers();
    // 根据实际JSON动态设置标题和内容，这里示例固定内容
    $scope.title = `Step ${$scope.index + 1} title`;
    
    // 动态生成HTML时，绑定到当前步骤的currentAnswers
    var html = '<input type="number" ng-model="currentAnswers.amount" placeholder="输入金额"/>';
    html += '<input type="text" ng-model="currentAnswers.name" placeholder="输入名称"/>';
    $scope.content = html;
  };

  // 初始化显示第一个步骤
  $scope.showStep();
});

2. 修改指令，使用父作用域而非隔离作用域 #

原来的指令用了隔离作用域，导致输入框的模型绑定到了指令自己的作用域里，现在改成使用父控制器的作用域：

app.directive('stepContents', function ($compile) {
  var linker = function(scope, element, attrs){
    element.html(scope.content);
    // 编译时使用父作用域，这样输入框的ng-model会绑定到控制器的currentAnswers
    $compile(element.contents())(scope);
  };
  return {
    restrict: 'E',
    link: linker,
    // 去掉隔离作用域，使用父作用域
    scope: false
  };
});

3. 保持HTML结构不变（无需修改） #

<form ng-app="MyApp" novalidate >
  <section class="question step " ng-controller="StepController">
    <div class="step-contents">
      {{title}}
      <step-contents content="content"></step-contents>
    </div>
    <button ng-disabled="index === 0">Prev</button>
    <button ng-click="nextStep()">Next</button>
  </section>
</form>

关键说明 #

• 用stepAnswers数组存储每个步骤的独立答案，避免步骤间数据干扰。
• currentAnswers作为当前步骤的绑定模型，让动态生成的输入框能直接绑定到控制器作用域的对象上。
• 指令去掉隔离作用域后，编译的HTML会继承父控制器的作用域，确保模型绑定正确。

现在点击Next按钮时，控制台会输出当前步骤的输入数据，完美解决你的问题！

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