Question

有没有办法让HTML-view包含来自服务器的预填充值，然后让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模型表示内容通过JS操纵。

Answer 1

虽然ng-init是一种解决方案，但它要求您明确设置值。所以这是另一种解决方案。

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

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

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

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

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

使用此功能之前，您需要了解一些事项。这还没有经过彻底的测试。它只适用于重复数组（而不是对象）。可能存在未涵盖的案例。我压倒ngRepeat本身可能会产生其他后果。循环浏览项目时（在服务器端代码中）不要忘记在第一个元素上添加default="true"，在其余元素上添加default。

希望这会有所帮助。

Answer 2

使用值将ng-init添加到元素中，以便它可以按您希望的方式工作。

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

Answer 3

我认为您真正想要的是通过并行提供静态文件来搜索您的应用程序。请在此处详细了解http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

有没有办法让AngularJS与HTML一起工作？

3 个答案: