Javascript 如何使用Angular从普通（非Angular）HTML创建交互式小部件？

我正在构建一个角度应用程序：一个培训引擎，它将向用户呈现在线课程

每个课程基本上都是一系列“幻灯片”——用户可以按顺序浏览的HTML部分。每张幻灯片可以包含零个或多个不同类型的交互式小部件：简单测验、动手练习等

我的目标是让课程由纯HTML/CSS组成，这样技术含量较低的人就可以构建课程，而不必使用JS或Angular。只要课程只包含静态HTML就可以了。但是，当我想将交互式小部件添加到课程中时，它会变得很棘手

例如，示例课程“幻灯片”可能如下所示：

<p>Here's some static content introducing the quiz.</p>

<div class="quiz">

    <ol class="questions" data-passing-score="50">
        <li>

            <p>What was Abraham Lincoln's last name?</p>

            <ul class="answers">
                <li>Smith</li>
                <li>Johnson</li>
                <li class="correct">Lincoln</li>
                <li>Liebowitz</li>
            </ul>

        </li>
        <li>

            <p>What were George Washington's false teeth made of?</p>

            <ul class="answers">
                <li>Particle board</li>
                <li class="correct">Wood</li>
                <li>The bones of his enemies</li>
                <li>Advanced space-age polymers</li>
            </ul>

        </li>
    </ol>

</div>

<p>Here's some static content that appears after the quiz.</p>

var quiz = {
    passing_score: 50,
    questions: [
        {
            ask: "What was Abraham Lincoln's last name?",
            answers: [
                { text: "Smith", correct: false },
                { text: "Johnson", correct: false },
                { text: "Lincoln", correct: true },
                { text: "Liebowitz", correct: false }
            ]
        },
        ...
    ]
};

<form ng-controller="QuizController as quizCtrl" ng-submit="quizCtrl.submit()">

    <ol>
        <li ng-repeat="question in quizCtrl.questions">
            <p ng-bind-html="question.ask"></p>
            <ul>
                <li ng-repeat="answer in question.answers">
                    <label>
                        <input type="radio" ng-attr-name="{{ 'q' + $parent.$index }}" ng-model="question.selected_answer" ng-value="answer">
                        <span ng-bind-html="answer.text"></span>
                    </label>
                </li>
            </ul>
        </li>
    </ol>

    <button type="submit">Score Quiz</button>

</form>

我想我应该将加载的HTML转换成DOM树（仅在内存中，而不是附加到文档中），然后探索它（使用jQuery或jqLite）以找到我感兴趣的数据

这是明智的做法吗？我是否还想探索其他方法？

问题2:其次，我需要将加载的HTML中的

div.quick

替换为测验模板的内容，如下所示：

<p>Here's some static content introducing the quiz.</p>

<div class="quiz">

    <ol class="questions" data-passing-score="50">
        <li>

            <p>What was Abraham Lincoln's last name?</p>

            <ul class="answers">
                <li>Smith</li>
                <li>Johnson</li>
                <li class="correct">Lincoln</li>
                <li>Liebowitz</li>
            </ul>

        </li>
        <li>

            <p>What were George Washington's false teeth made of?</p>

            <ul class="answers">
                <li>Particle board</li>
                <li class="correct">Wood</li>
                <li>The bones of his enemies</li>
                <li>Advanced space-age polymers</li>
            </ul>

        </li>
    </ol>

</div>

<p>Here's some static content that appears after the quiz.</p>

var quiz = {
    passing_score: 50,
    questions: [
        {
            ask: "What was Abraham Lincoln's last name?",
            answers: [
                { text: "Smith", correct: false },
                { text: "Johnson", correct: false },
                { text: "Lincoln", correct: true },
                { text: "Liebowitz", correct: false }
            ]
        },
        ...
    ]
};

<form ng-controller="QuizController as quizCtrl" ng-submit="quizCtrl.submit()">

    <ol>
        <li ng-repeat="question in quizCtrl.questions">
            <p ng-bind-html="question.ask"></p>
            <ul>
                <li ng-repeat="answer in question.answers">
                    <label>
                        <input type="radio" ng-attr-name="{{ 'q' + $parent.$index }}" ng-model="question.selected_answer" ng-value="answer">
                        <span ng-bind-html="answer.text"></span>
                    </label>
                </li>
            </ul>
        </li>
    </ol>

    <button type="submit">Score Quiz</button>

</form>

分数测验

…把那个div绑到QuizController上

如何将特定DOM节点动态绑定到特定控制器？如何将测验对象（我在上一步中构造）放入控制器的作用域？

在有棱角的土地上有没有标准的ish解决方案？还是整个方法都是胡说八道？

---

希望这是有意义的。感谢您提供的任何指导

正如@dandavis在上述评论中所建议的那样，答案是

对于我的测验示例，我可以创建一个自定义指令来定义自定义元素。（或者，我可以在指令定义中使用

restrict:'C'

来匹配

，或者使用

restrict:'A'

来匹配

）

然后，我将把所有设置和DOM消息处理逻辑放在指令的link函数中

最后，我只需要向课程作者说明他们应该如何标记测验

---

我还没有在真正的代码中充分说明这一点，但我很确定这一切都是准确的。

我的第一直觉是，如果你制作普通HTML的理由只是为了简单起见将其转换为另一个模板，为什么不从JSON开始呢？让人们写一些像问题1中你的片段那样的测验，把这些东西放在你的控制器里，你甚至可以只有一个控制器对我发出指令…@azium:这是一个很好的观点，我自己也想到了这一点。然而，这只会产生新的问题：测验作者如何声明测验应该在HTML文件中的何处呈现？现在，测验作者需要了解HTML和JSON，必须为一张幻灯片处理多个文件，并且需要处理奇怪的非标准HTML标记或属性（因为他们可能需要使用类似的东西来指示JSON定义的测验应该插入到标记中的何处，以及应该在那里呈现哪个测验JSON）。一种可能是使用任务运行程序（如Grunt）将普通HTML/CSS课程编译成JSON文件。这不是一个糟糕的选择——但我仍然很好奇如何才能按照我最初描述的方式来做。很明显，作为开发人员，您必须处理这个问题，但是一个非常简单的指令就可以了。类似于

，其中quizzify是一个获取json内容并填充测验的指令。