Javascript 在AngularJS中动态生成ng模型

我正在尝试使用过滤器动态生成ng模型指令。 其主要思想是数据库中有一些文本。此文本的间距由方括号（[1]、[2]等）之间的数字定义。目的是分析这些差距并将其转化为输入。然后应该使用ng模型指令将这些输入绑定到一个变量，但我无法让它工作

这是我的控制器：

 app.controller('exerciseTemplateCtrl', ['$http', '$scope', '$sce', '$filter', '$compile',  function($http, $scope, $sce, $filter, $compile){

    // used to test the binding through ng-model
    $scope.answers = [];

    $http.get('encode_exercises.json')
         .then(function(response){
            $scope.firstExercise = response.data;
        });

    $scope.parseHtml = function(input){
        input = $filter('gapToInput')(input);
        return $sce.trustAsHtml(input);
    };

}]);

app.directive('exerciseTemplate', function(){
  return{
    restrict: 'E',
    templateUrl: 'exercise-template.html'
  };
});

app.directive('exerciseTemplate', function(){
    return{
        restrict: 'E',
        scope: true,
        templateUrl: '/exercise-template.html'
    };
});

app.directive('qText', ['$compile', '$timeout', function($compile, $timeout){
    return {
        restrict: 'E',
        link: function(scope, element, attrs){
            $timeout(function(){
                var output = element.html().replace(/\[[0-9]\]/g, '<input type="text" ng-model="answers">');
                element.html(output);
                $compile(element.contents())(scope);
            });
        }
    }
}]);

<q-text ng-bind-html="parseHtml(question.d.q)"></q-text>

这里是我的过滤器“GAPTOINT”

app.filter('gapToInput', function(){
    return function(input){
        return input.replace(/\[[0-9]\]/g, '<input type="text" ng-model="answers">');
    };
});

index.html包含前面的指令：

<exercise-template></exercise-template>

我还遵循并尝试将指令格式更改为以下格式：

app.directive('exerciseTemplate', ['$compile', '$http', function($compile, $http){
    return {
        restrict: 'E',
        link: function(scope, element, attrs){
            $http.get('exercise-template.html').then(function(result){
                element.replaceWith($compile(result.data)(scope));
            });
        }
    }
}]);

但它仍然没有约束模型。我开始感到有点沮丧，因为即使是最简单的事情也很难做到，所以我非常感谢你的帮助

---

谢谢

我还没有测试这段代码，但这里的要点是，您可以在ng repeat上使用一个内嵌的过滤器来分割“间隙”。这将返回一个项目数组，您可以基于该数组创建模型

<div ng-repeat="exercise in firstExercise">
    <div ng-repeat="(questionId, question) in exercise.q | gapToInput">
        <input ng-repeat="" type="text" ng-model="exercise.q[questionId].answer">
    </div>
</div>

---

经过一些调查，我设法找到了解决我最初问题的办法。即使SoluableNonagon回答了我的问题，我也会发布另一种解决问题的方法

这个想法与我第二次尝试重新编译模板非常相似，但我可能遗漏了一些东西，因此下面是完整的工作代码：

指令：

 app.controller('exerciseTemplateCtrl', ['$http', '$scope', '$sce', '$filter', '$compile',  function($http, $scope, $sce, $filter, $compile){

    // used to test the binding through ng-model
    $scope.answers = [];

    $http.get('encode_exercises.json')
         .then(function(response){
            $scope.firstExercise = response.data;
        });

    $scope.parseHtml = function(input){
        input = $filter('gapToInput')(input);
        return $sce.trustAsHtml(input);
    };

}]);

app.directive('exerciseTemplate', function(){
  return{
    restrict: 'E',
    templateUrl: 'exercise-template.html'
  };
});

app.directive('exerciseTemplate', function(){
    return{
        restrict: 'E',
        scope: true,
        templateUrl: '/exercise-template.html'
    };
});

app.directive('qText', ['$compile', '$timeout', function($compile, $timeout){
    return {
        restrict: 'E',
        link: function(scope, element, attrs){
            $timeout(function(){
                var output = element.html().replace(/\[[0-9]\]/g, '<input type="text" ng-model="answers">');
                element.html(output);
                $compile(element.contents())(scope);
            });
        }
    }
}]);

<q-text ng-bind-html="parseHtml(question.d.q)"></q-text>

app.directive（'exerciseTemplate'，function（）{
返回{
限制：'E'，
范围：正确，
templateUrl:“/exercise template.html”
};
});
app.directive（'qText'，['$compile'，'$timeout'，函数（$compile，$timeout）{
返回{
限制：'E'，
链接：函数（范围、元素、属性）{
$timeout（函数（）{
var output=element.html（）.replace（/\[[0-9]\]/g'）；
html（输出）；
$compile（element.contents（））（范围）；
});
}
}
}]);

练习模板.html：

 app.controller('exerciseTemplateCtrl', ['$http', '$scope', '$sce', '$filter', '$compile',  function($http, $scope, $sce, $filter, $compile){

    // used to test the binding through ng-model
    $scope.answers = [];

    $http.get('encode_exercises.json')
         .then(function(response){
            $scope.firstExercise = response.data;
        });

    $scope.parseHtml = function(input){
        input = $filter('gapToInput')(input);
        return $sce.trustAsHtml(input);
    };

}]);

app.directive('exerciseTemplate', function(){
  return{
    restrict: 'E',
    templateUrl: 'exercise-template.html'
  };
});

app.directive('exerciseTemplate', function(){
    return{
        restrict: 'E',
        scope: true,
        templateUrl: '/exercise-template.html'
    };
});

app.directive('qText', ['$compile', '$timeout', function($compile, $timeout){
    return {
        restrict: 'E',
        link: function(scope, element, attrs){
            $timeout(function(){
                var output = element.html().replace(/\[[0-9]\]/g, '<input type="text" ng-model="answers">');
                element.html(output);
                $compile(element.contents())(scope);
            });
        }
    }
}]);

<q-text ng-bind-html="parseHtml(question.d.q)"></q-text>

这将获取的内部HTML并将其传递给指令的link函数。然后我使用jQLite的html（）函数检索html并用输入替换每个间隙，之后我只需将html放回元素并重新编译模板。之后，每个输入都将通过ng模型指令与“answers”变量绑定

我不得不使用$timeout，因为否则，html（）方法返回null，可能是因为DOM还没有准备好。不知道这是否是一个好的练习，但这是我能找到的唯一使它起作用的方法

---

如果您有任何建议或建议，我们将不胜感激。

谢谢您的评论。那可能行得通。我将尝试一下并发布结果。好吧，我刚刚测试了它，它工作正常！我现在必须修复一些布局问题，因为其中一些输入可能位于表格单元格内，添加输入会破坏表格格式，但也许我可以找到解决方案。非常感谢你！