javascript - 我如何使用 Angular 从 vanilla(非 Angular)HTML 创建交互式小部件？

Question

我正在构建一个 Angular 应用程序:一个将向用户展示在线类(class)的培训引擎。

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

我的目标是让类(class)由纯 HTML/CSS 组成，这样技术水平较低的人也可以构建类(class)，而不必亲自动手使用 JS 或 Angular。只要类(class)只包含静态 HTML 就可以了。但是，当我想将交互式小部件添加到类(class)时，这就变得棘手了。

例如，示例类(class)“幻灯片”可能如下所示:

<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>

...并且，当这个 HTML 文件被加载时(大概是通过 $http.get())，我的应用程序会注意到它包含一个 div class quiz，并设置所需的交互性:调整标记的结构(例如，添加单选按钮和提交按钮)，也许隐藏和显示元素(所以用户一次只能看到一个问题)，对提交的测验进行评分等。

这是 jQuery 领域中非常常见的模式。当然，我们不在 jQuery 领域。

如果我对此的思考是正确的，那么我需要解决两个问题才能完成这项工作。

问题 1:首先，我需要从原始 HTML 中获取测验数据，并将其放入 JavaScript 对象中。例如，我可能会将上面的 HTML 解析成这样的结构:

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 }
            ]
        },
        ...
    ]
};

我想我想将加载的 HTML 转换为 DOM 树(仅在内存中，不附加到文档)，然后探索它(使用 jQuery 或 jqLit​​e)以找到我感兴趣的数据。

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

问题 2:其次，我需要用测验模板的内容替换 div.quiz 在加载的 HTML 中，例如这个:

<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 绑定(bind)到 QuizController。

如何将特定的 DOM 节点动态绑定(bind)到特定的 Controller ？如何将测验对象(我在上一步中构建) 放入 Controller 的范围？

在 Angular 领域是否有针对此问题的标准解决方案？或者整个方法完全是香蕉？

希望这是有道理的。感谢您提供的任何指导!

Answer 1

正如@dandavis 在上面的评论中建议的那样，答案是 custom directives .

对于我的测验示例，我可以创建一个定义自定义元素的自定义指令。 (或者，我可以在我的指令定义中使用 restrict: 'C' 来匹配 <div class="quiz"> ，或者使用 restrict: 'A' 来匹配 <div quiz> 。)

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

最后，我只需要向类(class)作者说明他们应该如何标记测验。

我还没有在真正的代码中完全发挥它，但我很确定这一切都是准确的。