Question

设置：我通过重新构建几年前使用.NET构建的动态调查应用程序来学习Angular JS。 DB对于任何特定测试都有一系列问题，并且每个问题都与一种答案类型（多项选择，自由文本，真/假）相关联。

在.NET中，我刚刚创建了一个＆＃34;答案＆＃34;基类，可以为问题提供从中派生的不同类型的答案。然后使用转发器构建并推出每种不同类型的html。

问题：现在，我已为每种答案类型设置了一个指令，以处理每种答案类型的功能/外观。我希望能够遍历问答类型的json文档以生成正确的视图，但我不知道如何做到这一点。我应该创建一个包含每种类型的答案指令的问题指令，并且只输出一个非空的问题，或者我可以使用ng-repeat以某种方式返回正确的答案指令吗？

非常感谢任何例子！

Answer 1

如果我理解你的问题，那么据我所知，这在Angular中实现起来有点棘手但并非不可能。

如果您有如下数据模型：

$scope.answers = [
    { dir: 'multiple-choice-answer', data: { ... } },
    { dir: 'text-answer', data: { ... } },
    { dir: 'radio-button-answer', data: { ... } }
];

每个指令都是这样的：

angular.module('myapp').directive('multipleChoiceAnswer', function () {

    return {
        restrict: 'A',
        scope: {},
        replace: true, 
        templateUrl: '<div class="multiple-choice-answer">this is a multiple choice answer</div>',

        link: function ($scope, elm, attrs) {
        }
    };

});

在你的HTML中：

<div ng-repeat="answer in answers">
    <div {{dir}}></div>
</div>

然后不幸的是，这将无法正常工作，也无法按照您的预期进行解析。我设法解决这个问题的方法是创建一个包装器指令，如下所示：

angular.module('myapp').directive('answerWrapper', ['$compile', function ($compile) {

    return {
        restrict: 'A',
        scope: {
            answer: '='
        },
        replace: true,   
        template: '<div class="answer-wrapper"></div>',

        link: function (scope, elm, attrs) {

            scope.$watch('answer', function (val) {
                scope.build(val.dir);
            });

            scope.build = function (directiveName) {
                var answer = $compile('<div ' + directiveName + ' answer="answer"></div>')(scope);
                elm.append(answer);
            };
        }
    };

}]);

然后在转发器中使用它如下：

<div ng-repeat="answer in answers">
    <div answer-wrapper answer="answer"></div>
</div>

请注意，在编译字符串中，我们将answer对象传递给已编译的答案类型，以便它可以访问模型中的数据对象。

你可以重复多种类型的AngularJS指令吗？

1 个答案: