Javascript 如何使用angularjs对HTML列表进行渐进增强？

比方说，我有一个可访问的网站，将咨询JS禁用

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

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

新闻1
新闻2
新闻3

每次重新加载页面时，都会添加最新的新闻，如果有10条以上的新闻，则会丢弃旧新闻

现在，如果我使用AngulardJS，我必须将数据放在一个模型中，然后使用ng repeat，并去掉我的静态HTML。列表将动态填充，因此使用JS的人将看到列表几乎实时更新

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

现在，我目前的做法是：

• 当我的模型初始化时，将列表DOM分成部分，手动提取数据，并删除所有子列表
• 在列表中插入角度模板代码
• 让我们发挥它的魔力吧

---

这很糟糕，因为你失去了angular的声明性优点，再加上你有很多锅炉代码甚至不是通用的，所以你需要为页面中的每个小部件重写它

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

---

目前，我只想在启用javascript时隐藏静态html并显示角度DOM

您将需要注入与生成的静态html等效的js模型，这不是很好（不枯燥），但尝试从DOM获取初始数据将更难维护IMHO。

---

您可以将所有javascript/模板捆绑在一个js文件中，这样静态页面将只有一个脚本导入，并且页面权重不会对noscript查看器产生影响。

启用javascript时，我只会隐藏静态html并显示角度DOM。您将需要注入与生成的静态html等效的js模型，这不是很好，但是尝试从DOM获取初始数据将更难维护IMHO。在一个完美的世界里，你可以用javascript引擎生成静态页面，在服务器上生成angular页面，这样就不必复制代码/模板，但这不是一个简单的方法。这不是我的完美世界，因为我不喜欢用JS:-）我喜欢你的方法（你应该把它作为一个答案，这样我就可以升级视频了）因为它简单易维护。Bt意味着上传两倍于数据集大小的数据，因此我们绝对不是在一个理想的世界中。谢谢，我将对此给出一个小的回答；）是的，为了达到最佳效果，我们可能需要注入angularJS的初始状态并跳过初始渲染，我想angularJS google小组已经讨论过了。你认为可以制作一个插件，用somes类标记初始标记并自动加载到模型中吗？这样我就可以解决我的问题并与他人分享。但如果不可行，我不想在上面花费时间。这是可行的，但我认为与只在页面中呈现包含初始模型数据的json对象的简单性相比，时间投资不值得。