在自定义指令中生成HTML,在AngularJS中生成$compile

普朗克: https://plnkr.co/edit/IQpGhinzsHUUqmwbHFmQ?p=preview

我试图创建一个表单,该表单读取一些JSON并创建相关视图。每组问题都有自己的步骤。我无法访问每个 input 使用AngularJS对其进行验证。

如何访问 answers 在中创建的模型 forEach 环

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 >Prev</button>
            <button ng-click="nextStep(content)">Next</button>
        </section>
    </form>

我的AngularJS:

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

app.controller('StepController', function($scope) {

    $scope.index = 0;

    $scope.nextStep = function() {

        console.log($scope.answers); // This should be the input data for _THIS_ step only

    }

    $scope.showStep = function() {

        //FOREACH HAPPENS HERE
        // Loops over some JSON to generate the following HTML:
        $scope.title = "Step 1 title";

        var html = '<input type="number"  ng-model="answers.amount" />';
        html += '<input type="text"  ng-model="answers.name" />';
        $scope.content = html;

        //FOREACH ENDS HERE

    }

    $scope.showStep();

});

app.directive('stepContents', function ($compile) {

    var linker = function(scope, element, attrs){

        element.html(scope.content);
        $compile(element.contents())(scope);
    };

    return {
        restrict: 'E',
        link: linker,
        scope: {
            content: '=',
        },
    };

});