如何使用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分开,手动提取数据,并删除所有子列表
• 在列表中注入角度模板代码
• 让角度做它的魔力

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

Answer 1

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

目前我只是隐藏静态 html 并在启用 JavaScript 时显示角度 DOM。

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