有没有办法让AngularJS以HTML为先？

有没有办法从服务器获得带有预填充值的HTML视图，然后让AngularJS将这些值读入它的$scope？有没有办法让AngularJS以HTML为先？

我想一个场景，其中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操纵。

来源

2013-04-05 Seb Nilsson

将ng-init添加到您的元素与值，以便它会按照你想要的方式工作。

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

来源

2013-04-05 13:39:31 lucuma

这是否适合收藏？我如何保持我的视图与模型更新同步？ – 2013-04-05 13:40:18

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

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

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

EDIT（含伍重复的解决方案）：

所以，我在想办法让NG重复同样的工作方式相同。但是让这些工作像这样工作并不是一件容易的事情（参见代码证明：P）。我终于找到了解决办法 - 在这里你去：

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

有几个你需要知道你使用此之前的事情。这没有经过彻底的测试。它只适用于重复数组（不是对象）。可能有些案例尚未涉及。我重写ngRepeat本身可能会产生其他后果。在循环访问项目时（在服务器端代码中），不要忘记在第一个元素上添加default="true"，在其余元素上添加default。

希望这会有所帮助。

来源

2013-04-05 13:48:17 ganaraj

它有很大的帮助，谢谢。你有关于如何管理“重复”情况的提示吗？ – 2013-04-05 13:53:30

我目前没有针对'ng-repeat'情况的解决方案 - 如果我找到一个，请告诉我。 – ganaraj 2013-04-05 14:45:41

@SebNilsson：我已经更新了包含支持'ng-repeat'的另一个plunk的答案。看一看。 – ganaraj 2013-04-05 19:52:55

我想你真正想要的是通过并行提供静态文件来使你的应用程序可搜索。在这里阅读更多关于http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

来源

2013-04-05 23:01:15

“如果你使用Apache ...” - 我不是。此外，哈希爆炸杀死了小猫。 – 2013-04-08 06:11:33

有没有办法让AngularJS以HTML为先？

回答

相关问题