有没有办法让 AngularJS 与 HTML-first 一起工作？答案

【问题标题】：Is there a way to make AngularJS work with HTML-first?有没有办法让 AngularJS 与 HTML-first 一起工作？
【发布时间】：2013-03-27 22:30:08
【问题描述】：

有没有办法让 HTML 视图包含来自服务器的预填充值，然后让 AngularJS 将这些值读入它的 $scope？

我在想一个 HTML 是这样的场景：

<div ng-controller="TestController">
    <div ng-bind="title">Test Title</div>
    <div ng-bind="itemCount">33</div>
    <div ng-repeat="item in items">
        <div ng-bind="item.title">Item 1 Title</div>
    </div>
</div>
<button ng-click="update()">Update</button>

而 JavaScript 是这样的：

function TestController($scope) {
    $scope.update = function() {
        console.log($scope.title); // Should log "Test Title"
    };
}

这背后的想法是让服务器渲染 HTML，搜索引擎可以索引，但有一个JavaScript-model-representation of content strong> 用于通过 JS 进行操作。

【问题讨论】：

标签： angularjs seo

【解决方案1】：

虽然ng-init 是一种解决方案，但它需要您明确设置值。所以这里有一个替代解决方案。

http://plnkr.co/edit/pq8yR9zVOHFI6IRU3Pvn?p=preview

注意：此解决方案不适用于ng-repeat。控制流指令不能与此一起使用。但是对于从ng-bind 中简单地提取信息，这非常有效。您需要做的就是将default 指令（plunk 中的代码）添加到您正在执行绑定的任何位置，它将提取文本内容并将其推送到范围变量。

编辑（使用 ng-repeat 的解决方案）：

所以，我在想一种方法让 ng-repeat 也以同样的方式工作。但是让 ng-repeat 像这样工作并不是一件容易的事（请参阅代码以获取证明：P）。我终于找到了解决方案 - 给你：

http://plnkr.co/edit/GEWhCNVMeNVaq9JA2Xm2?p=preview

在使用它之前，您需要了解几件事。这还没有经过彻底的测试。它仅适用于重复数组（而不是对象）。可能存在未涵盖的情况。我正在覆盖 ngRepeat 本身，这可能会产生其他后果。当您遍历项目（在您的服务器端代码中）时，不要忘记在第一个元素上添加 default="true"，在其余元素上添加 default。

希望这会有所帮助。

【讨论】：

帮助很大，谢谢。您对如何管理repeat-situation 有什么建议吗？
我目前没有针对 ng-repeat 情况的解决方案 - 如果我找到了会通知您。
@SebNilsson ：我已经更新了答案以包括另一个支持 ng-repeat 的 plunk。看看吧。
这一切看起来都很好而且（几乎）花花公子，但还有许多其他的可能要复杂得多。 ngIf 其中内容不是 HTML 的一部分或 ngInclude...应该有更好的方法...如果我们在视图中也将模型作为 JSON 传递怎么办？所以角度应该只初始化它而不是解析 HTML。从理论上讲，这可以使其适用于所有人，对吗？

【解决方案2】：

将ng-init 添加到带有值的元素中，这样它就会按照你想要的方式工作。

http://docs.angularjs.org/api/ng.directive:ngInit

【讨论】：

这对收藏有用吗？以及如何使我的视图与模型更新保持同步？

【解决方案3】：

我认为您真正想要的是通过并行提供静态文件来使您的应用程序可搜索。在此处阅读更多信息http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

【讨论】：

"如果你使用 Apache..." - 我不是。此外，哈希刘海会杀死小猫。