是否有可能“挖掘”页面中已存在的数据？ （AngularJS + Drupal）

Question

我有一个在服务器上生成的HTML页面。它包含与此类似的数据：

<ul>
 <li>Banana</li>
 <li>Apple</li>
 <li>Pear</li>
</ul>

是否有可能对这些数据进行“angularize”（或“后编译”），以获得与使用以下代码生成列表相同的行为：

<ul>
 <li ng-repeat="item in items">{{item.name}}</li>
</ul>

这样，我的列表将是可排序的，可过滤的等等。

我为什么要那样做？！ ; - ）

• 我正在使用Drupal作为我的页面生成器，出于多种原因我想保持这种方式（我的内容是可翻译的，可以使用Drupal的主题功能等）。
• 让服务器完全呈现页面的初始版本使其可被搜索引擎索引。 AngularJS行为主要只是UI增强功能。
• 我想避免额外的往返服务器，只是为了重新传输相同的数据。

注意事项：

• 我不只是询问如何使用AngularJS + Drupal实现所需的行为（我可以通过AngularJS发送请求的端点暴露Drupal的数据）。相反，我问如何回收已经在HTML中的数据，将其转换为AngularJS模型（理想情况下不依赖ngInit）。
• 我知道，我要问的是打破MVC模式。

如果你很好奇，该网站是http://ng-workshop.com/（它是AngularJS资源和教程的集合）。

谢谢！

Answer 1

提供角度数据的一种方法是将php数据作为javascript对象回显到页面，而不是页面上其他包含的脚本。

$dbResult = ['f1', 'f2', 'f3'];
echo "<script type='text/javascript'> var php_data = " . json_encode($dbResult) . ";</script>";

然后在你的角度js代码的某处...

$scope.items = php_data || [];

您可能希望将数据放在命名空间的javascript对象中，以防止任何踩踏。

示例：

PHP -> echo "myApp.page.data =" . json_encode($dbResult) . ";"
Angular -> $scope.items = myApp.page.data || [];