javascript - 如何使用 angularjs 对 HTML 列表进行渐进式增强？

Question

假设我有一个可访问的网站，该网站将在禁用 JS 的情况下进行咨询。

我有一个新闻列表，我可以这样总结:

<ul>
    <li>News 1</li>
    <li>News 2</li>
    <li>News 3</li>
</ul>

每次重新加载页面时，您都会添加最新的新闻，如果您获得超过 10 条新闻，则旧的新闻将被丢弃。

现在，如果我使用 Angulard JS，我必须将数据放入一个模型和一个 ng-repeat，并摆脱我的静态 HTML。该列表将动态填充，因此使用 JS 的人将看到几乎实时更新的列表。

我需要的是让两者协同工作。我需要静态列表，如果 JS 被激活，我希望将当前元素插入到模型中并由 angularjs 管理。

现在我目前的做法是:

• 当我的模型初始化时，分离列表 DOM，手动提取数据，并删除所有子列表
• 在列表中注入(inject) Angular 模板代码
• 让 Angular 发挥它的魔力

它很糟糕，因为你失去了 Angular 声明性优点，而且你有很多锅炉代码甚至不是通用的，所以你为页面中的每个小部件重写它。

Answer 1

这是一个很好的问题，在使用一些 js 框架时我已经想到了。

目前我只想隐藏静态 html 并在启用 javascript 时显示 Angular DOM。

您需要注入(inject)与您生成的静态 html 等效的 js 模型，这不是很好(不是 DRY)但是尝试从 DOM 获取初始数据将更难维护恕我直言。您可以将所有 javascript/模板捆绑在一个 js 文件中，这样一来，静态页面将只有一个脚本导入，并且对于无脚本查看器，页面重量不会受到影响。